/* ============================================================
   pathobrainseq.com v2 — Design Tokens (Phase 2/4)
   방향: Soft Bento + 사진주도 Hero · Eight Sleep × Function Health 결
   앵커: 2.AG (clinical teal · hairline · Paper↔Teal 교차 · pill)
   브랜드: teal #285F51 / 연민트 #E4F4EE / 진녹 #1E4A3F / 액센트 #3D9079 / border #C7E6DB
   라이트 우선 + 다크 토글([data-theme="dark"]) · WCAG AAA
   ============================================================ */

/* Self-hosted fonts (SIL OFL 1.1) — CSP 'self', 외부 CDN 의존 제거.
   Inter=Latin / Pretendard=Korean subset(사용 글리프만). 둘 다 variable wght. */
@font-face{
  font-family:'Inter';
  src:url('./assets/fonts/InterVariable.subset.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Pretendard';
  src:url('./assets/fonts/Pretendard.subset.woff2') format('woff2');
  font-weight:45 930; font-style:normal; font-display:swap;
}
/* 메트릭 매칭 fallback — swap 시 레이아웃 이동/체감 jank 최소화.
   Inter=capsize 검증값(Arial 기준) · Pretendard=실측 line-box(ascent/descent) */
@font-face{
  font-family:'Inter Fallback'; src:local('Arial');
  ascent-override:90.44%; descent-override:22.52%; line-gap-override:0%; size-adjust:107.12%;
}
@font-face{
  font-family:'Pretendard Fallback'; src:local('Apple SD Gothic Neo'),local('Noto Sans KR'),local('Malgun Gothic');
  ascent-override:95.21%; descent-override:24.12%; line-gap-override:0%; size-adjust:100%;
}

:root {
  /* ---- Brand primitives ---- */
  --c-teal:      #285F51;
  --c-teal-d:    #1F4A40;
  --c-teal-dd:   #163A32;
  --c-ink:       #1E4A3F;   /* 진녹 글씨 — 본문/헤드라인 (vs white 9.97 AAA) */
  --c-accent:    #3D9079;   /* 링크·태그·강조 (CTA 승격 ❌) */
  --c-mint:      #00C896;   /* 액션·뱃지·active 점만 (success/CTA accent) */
  --c-mint-bg:   #E4F4EE;   /* 연민트 라이트 섹션 (hero·CTA 띠) */
  --c-mint-tint: #F1F9F6;   /* 한 단계 옅은 surface */
  --c-border:    #C7E6DB;   /* hairline */
  --c-paper:     #FFFFFF;

  /* ---- Neutral ramp (cool teal-tinted) ---- */
  --n-900:#13211D; --n-800:#1E312B; --n-700:#2C463E; --n-600:#3D635B;
  --n-500:#557068; --n-400:#7C948C; --n-300:#A9C2BA; --n-200:#D6E7E0;
  --n-100:#EAF4F0; --n-050:#F5FAF8;

  /* ---- Semantic (LIGHT, default) — CEO 확정 토큰 (한 계열 + 단일 액센트) ---- */
  --surface:      #FFFFFF;
  --surface-soft: #F2F8F5;
  --highlight:    #E4F4EE;               /* 연민트 강조 면 */
  --bg:           #FFFFFF;               /* page canvas */
  --bg-brand:     #285F51;               /* 교차 다크 섹션(증명/통계/과학) */
  --on-brand:     #FFFFFF;               /* teal 위 흰 텍스트 (7.38 AAA) */
  --text-on-brand:#FFFFFF;
  --hairline:     #C7E6DB;
  --text:         #1E4A3F;
  --text-2:       #557068;
  --muted:        #9DBAB1;
  --accent:       #3D9079;
  --brand:        #285F51;               /* 액션/링크 (teal) */
  --brand-ink:    #1E4A3F;
  --link:         #285F51;
  --link-hover:   #1F4A40;
  --focus:        #1E9E78;               /* 포커스 링 — 라이트 가시 */
  --badge-bg:     var(--highlight);      /* 톤온톤 뱃지 (단일 액센트 유지) */
  --badge-ink:    #1E4A3F;
  /* aliases (기존 참조 호환) */
  --surface-2:    var(--surface-soft);
  --bg-alt:       var(--surface-soft);
  --text-muted:   var(--muted);

  /* ---- Typography ---- */
  --ff-sans: 'Inter','Inter Fallback','Pretendard','Pretendard Fallback',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans KR',sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  /* fluid scale (clamp: mobile → desktop) */
  --fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem);   /* hero H1 */
  --fs-h1:      clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem);
  --fs-h2:      clamp(1.65rem, 1.15rem + 2.1vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 1.0rem + 1.0vw, 1.6rem);
  --fs-lead:    clamp(1.1rem, 1.0rem + 0.5vw, 1.375rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-sm:      0.9375rem;   /* 15px */
  --fs-label:   0.75rem;     /* 12px eyebrow/label */
  --lh-tight:1.08; --lh-snug:1.25; --lh-normal:1.6;
  --tracking-tight:-0.02em; --tracking-label:0.09em;

  /* ---- Spacing (4px base) ---- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --section-y: clamp(4rem, 2rem + 8vw, 8rem);

  /* ---- Radii (Soft Bento — 넉넉한 라운드) ---- */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-card:24px; --r-pill:999px;

  /* ---- Elevation (hairline-first, 절제 shadow) ---- */
  --shadow-1: 0 1px 2px rgba(22,58,50,.04), 0 1px 1px rgba(22,58,50,.03);
  --shadow-2: 0 6px 24px -8px rgba(22,58,50,.12);
  --shadow-card: 0 2px 10px -4px rgba(22,58,50,.08);
  --glass-bg: rgba(255,255,255,.72);     /* 절제된 glass: nav/modal만 */
  --glass-blur: saturate(180%) blur(14px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast:140ms; --dur-base:240ms; --dur-slow:420ms;
  --lift: translateY(-2px);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: clamp(1rem, .5rem + 3vw, 2.5rem);
}

/* ---------- DARK (toggle) — CEO 확정 ---------- */
[data-theme="dark"] {
  --bg:          #0F1F1B;
  --surface:     #16302A;
  --surface-soft:#1B362F;
  --highlight:   #122B25;
  --bg-brand:    #0C1A16;
  --on-brand:    #06231A;
  --text-on-brand:#EAF5F0;
  --hairline:    rgba(255,255,255,.08);
  --text:        #EAF5F0;
  --text-2:      #B8D3C9;
  --muted:       #7F9A90;
  --accent:      #6BC2A6;
  --brand:       #3D9079;                /* 다크 = 밝게 */
  --brand-ink:   #EAF5F0;
  --link:        #6BC2A6;
  --link-hover:  #8AD3BB;
  --focus:       #57D6AE;                /* 다크 가시 */
  --badge-bg:    rgba(61,144,121,.18);
  --badge-ink:   #8AD3BB;
  --glass-bg:    rgba(15,31,27,.66);
  --shadow-card: 0 2px 12px -4px rgba(0,0,0,.5);
  --surface-2:   var(--surface-soft);
  --bg-alt:      var(--surface-soft);
  --text-muted:  var(--muted);
}

/* prefers-color-scheme 자동 (토글 미설정 시) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0F1F1B; --surface:#16302A; --surface-soft:#1B362F; --highlight:#122B25;
    --bg-brand:#0C1A16; --on-brand:#06231A; --text-on-brand:#EAF5F0; --hairline:rgba(255,255,255,.08);
    --text:#EAF5F0; --text-2:#B8D3C9; --muted:#7F9A90; --accent:#6BC2A6;
    --brand:#3D9079; --brand-ink:#EAF5F0; --link:#6BC2A6; --link-hover:#8AD3BB; --focus:#57D6AE;
    --badge-bg:rgba(61,144,121,.18); --badge-ink:#8AD3BB; --glass-bg:rgba(15,31,27,.66);
    --surface-2:var(--surface-soft); --bg-alt:var(--surface-soft); --text-muted:var(--muted);
  }
}

/* 접근성: 모션 최소화 존중 */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; --lift:none; }
}