/*
 * DB Group Design Tokens (Phase 4)
 *
 * 이 파일은 dbts.co.kr 전체의 디자인 토큰을 정의합니다.
 * override.css에서 이 변수들을 참조하여 c006 기존 스타일을 덮어씁니다.
 *
 * 설계 근거:
 *   - 타이포: toss.im 스케일 참조 (1.25 Major Third)
 *   - 여백: toss.im 섹션 간격 140px, 컨테이너 1280px
 *   - 색상: B2B 신뢰감 (deep navy primary + warm gray neutral + canon red accent)
 *   - 라운딩·그림자: phase4-design-guide §4-4, §4-5
 *   - WCAG AA 준수: 본문 4.5:1, 대형 텍스트 3:1
 */

:root {

  /* ========================================
     Typography
     ======================================== */

  /* P105 (2026-04-21): 자체 호스팅 static 4 weight(Regular/Medium/SemiBold/Bold)만
     제공. variable-font family 명칭은 font stack·주석·lp1 임시 파일에서 전량 회수
     (computed/runtime 기준 0건). */
  --font-sans: Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

  /* Type Scale — 1.25 Major Third, base 16px */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.5rem;     /* 40px */
  --text-4xl:  3.25rem;    /* 52px — 히어로 (legacy) */

  /* Display 토큰 (P0-2, Direction §7) — 히어로·section number·stat number 전용
     IP 뻥튀기 무게감 표현용. 일반 본문 위계와 분리. */
  --text-display-sm:    2.5rem;   /* 40px — 히어로 모바일 */
  --text-display-md:    3.5rem;   /* 56px — 히어로 태블릿 */
  --text-display-lg:    4.5rem;   /* 72px — 히어로 데스크톱 */
  --text-section-number: 6rem;    /* 96px — 섹션 번호(01·02·…) legacy */
  --text-stat-number:    4rem;    /* 64px — 신뢰의 근거 stat 숫자 (768px+ 4.5rem 미디어쿼리 분기) */

  /* Hero Display 토큰 (P0-3, 2026-04-19 밤) — bmsmile IP 뻥튀기 패턴
     섹션 번호·타이틀을 초대형으로 확장. bmsmile 1472px 기준 번호 240~280px,
     타이틀 110~130px 관측 → dbts 1280px 기준 재조정 */
  --text-section-number-hero: 13rem;  /* 208px — 섹션 번호 데스크톱 초대형 */
  --text-section-title-hero:  6rem;   /* 96px — 섹션 영문 타이틀 초대형 */
  --letter-spacing-hero:      -0.06em; /* bmsmile 패턴 밀집 tracking */

  /* Letter-spacing display (P0-1, Direction §7) — Vercel Geist 패턴
     헤딩에 -0.04em 적용으로 IP 뻥튀기 무게감. 본문은 미적용 (한국어 가독성). */
  --letter-spacing-display: -0.04em;

  /* Font Weight */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

  /* Line Height */
  --leading-tight:   1.25;
  --leading-snug:    1.4;
  --leading-normal:  1.7;
  --leading-relaxed: 1.85;

  /* Letter Spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;


  /* ========================================
     Colors — B2B Trust Palette
     ======================================== */

  /* Primary — Calm Blue (화이트 기반 팔레트, 고위 결정권자 선호 반영) */
  --color-primary-50:  #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #2563eb;  /* 기본 primary — WCAG AA on white ✅ 4.6:1 */
  --color-primary-600: #1e40af;
  --color-primary-700: #1e3a8a;
  --color-primary-800: #1a2e6e;
  --color-primary-900: #0f172a;  /* 다크 — 푸터/텍스트/선택적 강조만 */

  /* Accent — Canon Red (절제 사용) */
  --color-accent-50:  #fef2f2;
  --color-accent-100: #fcdcdc;
  --color-accent-300: #e85a5a;
  --color-accent-500: #bc0024;  /* 캐논 레드 원본 — WCAG AA on white ✅ 7.4:1 */
  --color-accent-700: #8a001a;
  --color-accent-900: #58000f;

  /* Neutral — Cool Neutral (삼성/토스 톤) */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f8f9fb;  /* 교대 섹션 배경 */
  --color-neutral-100: #f1f3f5;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;

  /* Semantic */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error:   #dc2626;
  --color-info:    var(--color-primary-500);

  /* Surface & Text */
  --color-surface:       var(--color-neutral-0);
  --color-surface-alt:   var(--color-neutral-50);
  --color-surface-accent: var(--color-primary-50);  /* 연한 블루 배경 — 신뢰 지표 등 */
  --color-surface-dark:  var(--color-primary-900);
  --color-text-primary:  var(--color-primary-900);  /* 거의 검정이지만 순흑 아닌 네이비 흑 */
  --color-text-secondary: var(--color-neutral-500);
  --color-text-tertiary: var(--color-neutral-400);
  --color-text-inverse:  var(--color-neutral-0);
  --color-text-link:     var(--color-primary-500);
  --color-border:        var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);


  /* ========================================
     Spacing — 4px base scale
     ======================================== */

  --space-0:  0;
  --space-1:  0.25rem;    /* 4px */
  --space-2:  0.5rem;     /* 8px */
  --space-3:  0.75rem;    /* 12px */
  --space-4:  1rem;       /* 16px */
  --space-5:  1.25rem;    /* 20px */
  --space-6:  1.5rem;     /* 24px */
  --space-8:  2rem;       /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
  --space-32: 8rem;       /* 128px */

  /* Semantic spacing */
  /* --space-section 폐기 (§2 P0-2, 2026-04-19): 미사용 토큰. 실 사용은
     override.css의 .dbg-landing { --section-py: 10rem } 로컬 custom property */
  --space-block:     2.5rem;   /* 40px — 콘텐츠 블록 간 */
  --space-container: 3rem;     /* 48px — 좌우 패딩 */


  /* ========================================
     Layout
     ======================================== */

  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  /* Breakpoints (참조용, 실제는 @media에서 사용) */
  /* Mobile: 0~767px (기본) */
  /* Tablet: 768px+ */
  /* Desktop: 1024px+ */
  /* Wide: 1280px+ */


  /* ========================================
     Borders & Radius
     ======================================== */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  /* --radius-2xl 폐기 (P0-4, Direction §3): 사용처 0건. radius 절제 (Vercel 0~4px,
     Linear 작게 통일 트렌드). 카드는 12~16px 범위 유지. */
  --radius-full: 9999px;


  /* ========================================
     Shadows — 광원: 좌상단 고정
     ======================================== */

  --shadow-xs:  0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-sm:  0 1px 3px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md:  0 4px 6px -1px rgba(28, 25, 23, 0.06), 0 2px 4px -2px rgba(28, 25, 23, 0.04);
  --shadow-lg:  0 10px 15px -3px rgba(28, 25, 23, 0.06), 0 4px 6px -4px rgba(28, 25, 23, 0.04);
  --shadow-xl:  0 20px 25px -5px rgba(28, 25, 23, 0.08), 0 8px 10px -6px rgba(28, 25, 23, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(28, 25, 23, 0.15);


  /* ========================================
     Transitions
     ======================================== */

  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;


  /* ========================================
     Z-Index Scale
     ======================================== */

  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}