/* ============================================================
   부스터웹(BOOSTERWEB) 디자인 토큰 — 모든 시안 공유 SSOT
   톤: 미니멀&프로 · 화이트 베이스 + #00AAFF 인터랙션 신호 + 다크 반전 2섹션
   ⚠️ a11y: #00AAFF는 흰 위 작은 텍스트 대비 부족 → 텍스트/링크는 --brand-ink,
      CTA는 --brand-cta(흰 텍스트) 또는 #00AAFF 배경+--ink-900 텍스트 사용.
   ============================================================ */
:root {
  /* ── 브랜드 블루 스케일 ── */
  --blue-50:  #E6F7FF;
  --blue-100: #BAE7FF;
  --blue-200: #8FD8FF;
  --blue-300: #5CC4FF;
  --blue-400: #2BB4FF;
  --blue-500: #00AAFF;   /* 시그니처 — 채움/글로우/보더/아이콘 */
  --blue-600: #0095E0;   /* CTA 배경(흰 텍스트 대비 개선) */
  --blue-700: #0077B3;   /* 흰 배경 위 텍스트/링크(AA) */
  --blue-800: #005C8A;
  --blue-900: #003E5C;   /* 다크 위 보조 */
  --brand:      var(--blue-500);
  --brand-cta:  var(--blue-600);
  --brand-ink:  var(--blue-700);
  --brand-rgb:  0, 170, 255;

  /* ── 중립(쿨그레이) ── */
  --paper:    #FFFFFF;
  --gray-50:  #F6F8FB;
  --gray-100: #EEF2F7;
  --gray-200: #E1E7EF;
  --gray-300: #CBD3DE;
  --gray-400: #9AA4B2;
  --gray-500: #6B7585;
  --gray-600: #4A5364;   /* 본문 */
  --gray-700: #333B49;
  --ink-800:  #1A2030;
  --ink-900:  #0B0F1A;   /* 다크 섹션 배경 / 최강조 헤딩 */

  /* ── 의미 토큰(라이트) ── */
  --bg:        var(--paper);
  --bg-subtle: var(--gray-50);
  --surface:   var(--paper);
  --text:      var(--ink-900);
  --text-soft: var(--gray-600);
  --text-mute: var(--gray-500);
  --border:    var(--gray-200);
  --link:      var(--brand-ink);

  /* ── 다크 반전(섹션 4 'AI·속도', 섹션 7 'SEO 데이터') ── */
  --d-bg:      var(--ink-900);
  --d-surface: #131A28;
  --d-text:    #F4F7FB;
  --d-soft:    #AEB8C7;
  --d-border:  rgba(255,255,255,.10);
  --d-glow:    0 0 48px rgba(var(--brand-rgb), .38);

  /* ── 타이포 ── */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-display: clamp(40px, 6.4vw, 72px);
  --fs-h1:      clamp(32px, 4.6vw, 52px);
  --fs-h2:      clamp(26px, 3.4vw, 38px);
  --fs-h3:      clamp(20px, 2.2vw, 26px);
  --fs-h4:      18px;
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-label:   13px;   /* 모노 대문자 라벨/뱃지 */
  --lh-tight:   1.12;
  --lh-snug:    1.32;
  --lh-body:    1.7;
  --tracking-label: .08em;

  /* ── 간격(4 베이스) ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --container: 1200px;
  --container-narrow: 920px;
  --section-y: clamp(64px, 9vw, 128px);

  /* ── 라운드/그림자 ── */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;
  --sh-sm: 0 1px 2px rgba(11,15,26,.06), 0 2px 8px rgba(11,15,26,.05);
  --sh-md: 0 6px 20px rgba(11,15,26,.08);
  --sh-lg: 0 18px 48px rgba(11,15,26,.12);
  --sh-brand: 0 10px 30px rgba(var(--brand-rgb), .28);

  /* ── 모션 ── */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .15s; --t-base: .25s; --t-slow: .45s;
}

/* 접근성 — 모션 최소화 존중 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}