/* hedvion-ui-kit-global v1.0.0 - tokens.css
 * 색은 OKLCH. 사이트별 차별화 = --hue-accent / --chroma-accent 두 값만 덮어쓴다(site-theme.css).
 * 명도(L)를 고정해 두어서 휴를 바꿔도 명암비(AA)가 유지된다.
 * 그라데이션 금지 - 전부 단색.
 */
:root {
  /* ---- 사이트 오버라이드 지점 (기본값 = 클레이, 파란 계열 아님) ---- */
  --hue-accent: 38;
  --chroma-accent: 0.11;
  --hue-neutral: 70;       /* 뉴트럴에 아주 약한 온기 */
  --chroma-neutral: 0.006;

  /* ---- 뉴트럴 (라이트) ---- */
  --c-bg:        oklch(98.6% var(--chroma-neutral) var(--hue-neutral));
  --c-surface:   oklch(100% 0 0);
  --c-sunken:    oklch(96.2% var(--chroma-neutral) var(--hue-neutral));
  --c-line:      oklch(90.5% var(--chroma-neutral) var(--hue-neutral));
  --c-line-strong: oklch(82% var(--chroma-neutral) var(--hue-neutral));
  --c-control-line: oklch(60% 0.01 var(--hue-neutral)); /* 입력·체크 테두리 3:1 이상 (WCAG 1.4.11) */
  --c-ink:       oklch(22% 0.01 var(--hue-neutral));
  --c-ink-2:     oklch(38% 0.01 var(--hue-neutral));
  --c-ink-3:     oklch(49% 0.01 var(--hue-neutral)); /* 흰 바탕 4.5:1 이상 */

  /* ---- 액센트 (단일) ---- */
  --c-accent:      oklch(44% var(--chroma-accent) var(--hue-accent));   /* 버튼 바탕·링크 */
  --c-accent-ink:  oklch(36% var(--chroma-accent) var(--hue-accent));   /* 연한 바탕 위 글자 */
  --c-accent-hover:oklch(38% var(--chroma-accent) var(--hue-accent));
  --c-accent-soft: oklch(95% calc(var(--chroma-accent) * .35) var(--hue-accent));
  --c-accent-line: oklch(85% calc(var(--chroma-accent) * .6) var(--hue-accent));
  --c-on-accent:   oklch(99% 0 0);

  /* ---- 상태색 ---- */
  --c-ok:     oklch(45% 0.11 150);
  --c-ok-soft: oklch(95% 0.03 150);
  --c-warn:   oklch(48% 0.11 70);
  --c-warn-soft: oklch(95.5% 0.04 80);
  --c-danger: oklch(48% 0.16 27);
  --c-danger-soft: oklch(95.5% 0.03 27);

  /* ---- 타입 ---- */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* 제목 폰트는 사이트가 --font-heading-site 로 고른다(site-theme.css). 값은 전체 스택: 'Fraunces', Georgia, serif */
  --font-heading: var(--font-heading-site, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
  --font-display: var(--font-heading); /* 국문 킷 호환 별칭 */
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-num: var(--font-body);
  /* 1.2 모듈러 스케일 + 화면폭 유동 */
  --fs-xs: .8125rem;   /* 13 */
  --fs-sm: .875rem;    /* 14 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --fs-4xl: clamp(2.125rem, 1.5rem + 3vw, 3.75rem);
  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-body: 1.7;
  --tracking-display: -0.02em;

  /* ---- 간격 (4px 그리드) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --gutter: clamp(16px, 4vw, 32px);
  --container: 1180px;       /* 레이아웃 폭(내용 자르기 용도 아님) */
  --measure: 68ch;           /* 본문 한 줄 길이 */
  --header-h: 64px;

  /* ---- 라운드 ---- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  /* ---- 그림자 (아주 옅게, 경계선이 주력) ---- */
  --sh-1: 0 1px 2px oklch(20% 0.01 var(--hue-neutral) / .06);
  --sh-2: 0 4px 16px -4px oklch(20% 0.01 var(--hue-neutral) / .10), 0 1px 2px oklch(20% 0.01 var(--hue-neutral) / .05);
  --sh-3: 0 16px 40px -12px oklch(20% 0.01 var(--hue-neutral) / .22);

  /* ---- 모션 ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 520ms;
  --focus: 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-accent);

  color-scheme: light;
}

/* ---- 다크: data-theme 명시가 최우선, 없으면 OS 설정 ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:        oklch(17.5% 0.008 var(--hue-neutral));
    --c-surface:   oklch(21% 0.009 var(--hue-neutral));
    --c-sunken:    oklch(15% 0.008 var(--hue-neutral));
    --c-line:      oklch(30% 0.01 var(--hue-neutral));
    --c-line-strong: oklch(40% 0.01 var(--hue-neutral));
    --c-control-line: oklch(58% 0.01 var(--hue-neutral));
    --c-ink:       oklch(95% 0.005 var(--hue-neutral));
    --c-ink-2:     oklch(82% 0.008 var(--hue-neutral));
    --c-ink-3:     oklch(70% 0.008 var(--hue-neutral));
    --c-accent:      oklch(76% calc(var(--chroma-accent) * .7) var(--hue-accent));
    --c-accent-ink:  oklch(82% calc(var(--chroma-accent) * .65) var(--hue-accent));
    --c-accent-hover:oklch(82% calc(var(--chroma-accent) * .7) var(--hue-accent));
    --c-accent-soft: oklch(27% calc(var(--chroma-accent) * .45) var(--hue-accent));
    --c-accent-line: oklch(42% calc(var(--chroma-accent) * .6) var(--hue-accent));
    --c-on-accent:   oklch(18% 0.01 var(--hue-accent));
    --c-ok: oklch(78% 0.12 150); --c-ok-soft: oklch(27% 0.04 150);
    --c-warn: oklch(82% 0.12 80); --c-warn-soft: oklch(28% 0.04 80);
    --c-danger: oklch(75% 0.14 27); --c-danger-soft: oklch(28% 0.05 27);
    --sh-1: 0 1px 2px oklch(0% 0 0 / .4);
    --sh-2: 0 6px 18px -6px oklch(0% 0 0 / .55);
    --sh-3: 0 18px 44px -12px oklch(0% 0 0 / .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --c-bg:        oklch(17.5% 0.008 var(--hue-neutral));
  --c-surface:   oklch(21% 0.009 var(--hue-neutral));
  --c-sunken:    oklch(15% 0.008 var(--hue-neutral));
  --c-line:      oklch(30% 0.01 var(--hue-neutral));
  --c-line-strong: oklch(40% 0.01 var(--hue-neutral));
  --c-control-line: oklch(58% 0.01 var(--hue-neutral));
  --c-ink:       oklch(95% 0.005 var(--hue-neutral));
  --c-ink-2:     oklch(82% 0.008 var(--hue-neutral));
  --c-ink-3:     oklch(70% 0.008 var(--hue-neutral));
  --c-accent:      oklch(76% calc(var(--chroma-accent) * .7) var(--hue-accent));
  --c-accent-ink:  oklch(82% calc(var(--chroma-accent) * .65) var(--hue-accent));
  --c-accent-hover:oklch(82% calc(var(--chroma-accent) * .7) var(--hue-accent));
  --c-accent-soft: oklch(27% calc(var(--chroma-accent) * .45) var(--hue-accent));
  --c-accent-line: oklch(42% calc(var(--chroma-accent) * .6) var(--hue-accent));
  --c-on-accent:   oklch(18% 0.01 var(--hue-accent));
  --c-ok: oklch(78% 0.12 150); --c-ok-soft: oklch(27% 0.04 150);
  --c-warn: oklch(82% 0.12 80); --c-warn-soft: oklch(28% 0.04 80);
  --c-danger: oklch(75% 0.14 27); --c-danger-soft: oklch(28% 0.05 27);
  --sh-1: 0 1px 2px oklch(0% 0 0 / .4);
  --sh-2: 0 6px 18px -6px oklch(0% 0 0 / .55);
  --sh-3: 0 18px 44px -12px oklch(0% 0 0 / .7);
  color-scheme: dark;
}

/* ---- 폰트: @font-face 는 fonts/<키>.css 에 있다(head 스니펫이 inter.css + 고른 제목 폰트 css 를 링크). 전부 font-display: swap, 외부 CDN 없음 ---- */

/* hidden 속성은 컴포넌트의 display 규칙에 지지 않는다 */
[hidden] { display: none !important; }