/* 3판 공용 토큰 (T-968) — 색·글꼴·간격은 여기 있는 것만 쓴다.
   brand/TOKENS.md A안(먹과 종이)을 다크 기본으로 넓힌 판이다.
   부하 셋(히어로 / 핀 스크럽 / AI·자동화·속도)이 새 색·새 글꼴을 만들지 않는다. */

:root {
  /* ── 글꼴: 시스템 스택만. 외부 요청 0개 (brand/TOKENS.md 공용 규칙) ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
               "Malgun Gothic", "맑은 고딕", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", "D2Coding", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── 다크가 기본 ── */
  --bg:        #0B0C0A;
  --bg-2:      #121310;
  --surface:   #1B1C18;
  --surface-2: #23241F;
  --text:      #F2F1EC;
  --muted:     #A5A49B;
  --faint:     #6E6E66;
  --border:    #2F302A;
  --accent:      #5FE3AE;   /* A안 다크 accent(#64C6A8)를 한 단계 밝힌 값 — 큰 글자·선에 쓴다 */
  --accent-deep: #1F6F5C;   /* A안 라이트 accent — 채움·그림자에 쓴다 */
  --accent-text: #07120E;   /* accent 위에 얹는 글자색 */
  --accent-soft: #14241E;   /* accent 계열 배경 */
  --shadow: 0 24px 60px rgba(0, 0, 0, .45);

  /* ── 히어로 색 흐름(5판) — 세 색이 안개처럼 섞여 천천히 흐른다.
        다크: accent 초록 계열 + 청록·남색 + 따뜻한 색 하나.
        셰이더는 이 값을 getComputedStyle 로 읽어 간다(CONTRACT: 셰이더 안 hex 금지). ── */
  --grad-1: #45D0A4;   /* accent 초록 계열 */
  --grad-2: #2A6E96;   /* 청록·남색 */
  --grad-3: #D2762E;   /* 따뜻한 색 하나 */

  /* ── 유리 질감(5판): 머리 메뉴·말풍선 공용 ── */
  --glass-bg:     rgba(24, 26, 22, .58);    /* 반투명 바탕 */
  --glass-line:   rgba(255, 255, 255, .12); /* 반투명 테두리 */
  --glass-top:    rgba(255, 255, 255, .16); /* 위쪽 1px 하이라이트 */
  --glass-shadow: rgba(0, 0, 0, .38);       /* 아래쪽 옅은 그림자 */
  --glass-blur:   18px;

  /* ── 글자 크기: 폰~PC 한 벌로 늘어난다 ── */
  --t-mega:  clamp(2.9rem, 10.4vw, 9.5rem);  /* 히어로 한 단어 (한글 세 줄이 100svh 안에 들어가는 크기) */
  --t-huge:  clamp(2.2rem, 5.8vw, 4.6rem);   /* 절 제목 — 히어로(--t-mega)보다 확실히 한 단 아래 */
  --t-big:   clamp(1.5rem, 3.4vw, 2.6rem);
  --t-lead:  clamp(1.05rem, 1.6vw, 1.3rem);
  --t-body:  clamp(0.98rem, 1.15vw, 1.06rem);
  --t-small: 0.86rem;
  --t-tiny:  0.76rem;

  /* ── 간격: 4의 배수 ── */
  --gap-1: 4px;  --gap-2: 8px;  --gap-3: 12px; --gap-4: 16px;
  --gap-6: 24px; --gap-8: 32px; --gap-12: 48px; --gap-16: 64px;
  --gap-24: 96px; --gap-32: 128px;
  --pad-side: clamp(20px, 5vw, 72px);
  --wrap: 1180px;

  --r-card: 16px;
  --r-btn: 10px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* 시스템이 라이트인데 사용자가 따로 안 골랐을 때 */
@media (prefers-color-scheme: light) {
  :root:not([data-mode]) { color-scheme: light; }
  :root:not([data-mode]) {
    --bg:        #FBFAF7;
    --bg-2:      #F4F2EC;
    --surface:   #FFFFFF;
    --surface-2: #F1EFE8;
    --text:      #171815;
    --muted:     #5E5D56;
    --faint:     #8E8D84;
    --border:    #E1DED4;
    --accent:      #14614E;
    --accent-deep: #0E4739;
    --accent-text: #FFFFFF;
    --accent-soft: #E6F1ED;
    --shadow: 0 18px 44px rgba(26, 26, 24, .12);

    /* 라이트: 같은 계열을 옅게 */
    --grad-1: #93DBBE;
    --grad-2: #9EC8E2;
    --grad-3: #F2C79A;

    --glass-bg:     rgba(255, 255, 255, .58);
    --glass-line:   rgba(23, 24, 21, .10);
    --glass-top:    rgba(255, 255, 255, .80);
    --glass-shadow: rgba(26, 26, 24, .10);
  }
}

/* 토글로 직접 고른 판 */
:root[data-mode="dark"] { color-scheme: dark; }
:root[data-mode="light"] {
  color-scheme: light;
  --bg:        #FBFAF7;
  --bg-2:      #F4F2EC;
  --surface:   #FFFFFF;
  --surface-2: #F1EFE8;
  --text:      #171815;
  --muted:     #5E5D56;
  --faint:     #8E8D84;
  --border:    #E1DED4;
  --accent:      #14614E;
  --accent-deep: #0E4739;
  --accent-text: #FFFFFF;
  --accent-soft: #E6F1ED;
  --shadow: 0 18px 44px rgba(26, 26, 24, .12);

  /* 라이트: 같은 계열을 옅게 */
  --grad-1: #93DBBE;
  --grad-2: #9EC8E2;
  --grad-3: #F2C79A;

  --glass-bg:     rgba(255, 255, 255, .58);
  --glass-line:   rgba(23, 24, 21, .10);
  --glass-top:    rgba(255, 255, 255, .80);
  --glass-shadow: rgba(26, 26, 24, .10);
}