/* 병원 키오스크 디자인 토큰 (hk.tokens.v1)
 * - 크기는 모두 「CSS px × --ui(화면 배율 kiosk.ui_scale)」, 글자는 여기에 「× --text-scale(큰 글씨)」.
 * - 브랜드 색은 관리자 설정(brand_palette)이 --brand-*-light / --brand-*-dark 를 덮어쓴다(JS 가 CSSOM 으로 넣음).
 * - 색은 뜻으로만: primary=길·주요 동작, secondary=안정·완료, accent=주의 끌기(따뜻함), danger=오류.
 * - 모드: html.is-portrait/.is-landscape · .is-large(큰 글씨) · .is-contrast(고대비) · .is-low(낮은 위치) · .motion-reduced
 */
:root {
  color-scheme: light;
  --ui: 1;
  --ui-text: 1;   /* min(--ui, 1.35) — JS(core/ui-scale.js)가 창 크기로 계산해 넣음 */
  --text-scale: 1;

  /* 글꼴 — 외부 웹폰트 없음. 설치돼 있으면 Pretendard, 없으면 각 OS 기본 한글 글꼴 */
  --font: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", system-ui, sans-serif;
  --font-num: "SF Pro Display", "Pretendard Variable", "Pretendard", -apple-system, "Segoe UI", "Malgun Gothic", system-ui, sans-serif;

  /* 브랜드 기본값(= SETTINGS §4 brand_palette 시드) */
  --brand-primary-light: #1F6F8B;   --brand-primary-dark: #5BB3CF;
  --brand-secondary-light: #2A8266; --brand-secondary-dark: #6CC9A8;
  --brand-accent-light: #E0A23B;    --brand-accent-dark: #F2C46D;
  --brand-danger-light: #C2453D;    --brand-danger-dark: #F0857D;

  /* 의미 색(밝게) */
  --c-primary: var(--brand-primary-light);
  --c-secondary: var(--brand-secondary-light);
  --c-accent: var(--brand-accent-light);
  --c-danger: var(--brand-danger-light);
  --c-warn: #B86E00;
  --c-on-primary: #ffffff;

  /* 바탕·면 — 아주 옅게 주색 쪽으로 기운 회색(차가운 병원 흰색이 아니라 차분한 흰색) */
  --c-bg: #F3F6F7;
  --c-bg-2: #EAF0F2;
  --c-surface: #FFFFFF;
  --c-surface-2: #F7FAFB;
  --c-sunken: #EDF2F4;
  --c-overlay: rgb(10 24 30 / 0.46);

  /* 글자 */
  --c-text: #0F1E25;
  --c-text-2: #435761;
  --c-text-3: #5E717A;
  --c-text-inverse: #FFFFFF;

  /* 선 */
  --c-line: #DFE7EA;
  --c-line-strong: #C9D5DA;
  --c-focus: var(--c-primary);

  /* 주색에서 만든 옅은 색(브랜드 색을 바꾸면 따라 바뀜) */
  --c-primary-soft: color-mix(in oklab, var(--c-primary) 11%, var(--c-surface));
  --c-primary-soft-2: color-mix(in oklab, var(--c-primary) 20%, var(--c-surface));
  --c-primary-strong: color-mix(in oklab, var(--c-primary) 82%, #000);
  --c-primary-deep: color-mix(in oklab, var(--c-primary) 46%, #04141A);
  --c-secondary-soft: color-mix(in oklab, var(--c-secondary) 12%, var(--c-surface));
  --c-accent-soft: color-mix(in oklab, var(--c-accent) 16%, var(--c-surface));
  --c-danger-soft: color-mix(in oklab, var(--c-danger) 11%, var(--c-surface));
  --c-warn-soft: #FDF1DD;

  /* 그림자 — 낮고 넓게(떠 있는 느낌만) */
  --shadow-1: 0 1px 2px rgb(15 40 50 / 0.06), 0 1px 1px rgb(15 40 50 / 0.04);
  --shadow-2: 0 2px 4px rgb(15 40 50 / 0.04), 0 12px 32px -8px rgb(15 40 50 / 0.12);
  --shadow-3: 0 4px 10px rgb(15 40 50 / 0.06), 0 32px 80px -16px rgb(15 40 50 / 0.28);
  --shadow-press: 0 1px 2px rgb(15 40 50 / 0.08);
  --ring: 0 0 0 calc(4px * var(--ui)) color-mix(in oklab, var(--c-focus) 35%, transparent);
  --border-w: calc(1px * var(--ui));

  /* 간격(8 기준) */
  --sp-1: calc(4px * var(--ui));
  --sp-2: calc(8px * var(--ui));
  --sp-3: calc(12px * var(--ui));
  --sp-4: calc(16px * var(--ui));
  --sp-5: calc(24px * var(--ui));
  --sp-6: calc(32px * var(--ui));
  --sp-7: calc(40px * var(--ui));
  --sp-8: calc(48px * var(--ui));
  --sp-9: calc(64px * var(--ui));
  --sp-10: calc(80px * var(--ui));
  --sp-11: calc(96px * var(--ui));

  /* 반경 */
  --r-sm: calc(12px * var(--ui));
  --r-md: calc(20px * var(--ui));
  --r-lg: calc(28px * var(--ui));
  --r-xl: calc(40px * var(--ui));
  --r-pill: 999px;

  /* 터치 */
  --touch-min: max(48px, calc(88px * var(--ui)));     /* a11y.min_touch_px 가 덮어씀 */
  --touch-gap: calc(16px * var(--ui));

  /* 레이아웃(세로 1080×1920 기준 — ANALYSIS §6) */
  --gutter: calc(64px * var(--ui));
  --topbar-h: calc(140px * var(--ui));
  --bottombar-h: calc(168px * var(--ui));
  --content-max: calc(1600px * var(--ui));
  --low-zone: 55%;                          /* a11y.low_position_zone_pct */

  /* 글자(세로) — 본문 32 · 제목 56 · 메뉴 이름 60 · 최소 28 */
  --fs-min: max(14px, calc(28px * var(--ui-text) * var(--text-scale)));
  --fs-sm: max(14px, calc(28px * var(--ui-text) * var(--text-scale)));
  --fs-body: max(14px, calc(32px * var(--ui-text) * var(--text-scale)));
  --fs-lg: max(14px, calc(38px * var(--ui-text) * var(--text-scale)));
  --fs-xl: max(14px, calc(44px * var(--ui-text) * var(--text-scale)));
  --fs-title: max(14px, calc(56px * var(--ui-text) * var(--text-scale)));
  --fs-menu: max(14px, calc(56px * var(--ui-text) * var(--text-scale)));
  --fs-display: max(14px, calc(76px * var(--ui-text) * var(--text-scale)));
  --fs-hero: max(14px, calc(92px * var(--ui-text) * var(--text-scale)));
  --lh-tight: 1.18;
  --lh: 1.45;
  --track-tight: -0.022em;
  --track: -0.01em;
  --fw-regular: 450;
  --fw-medium: 560;
  --fw-semibold: 650;
  --fw-bold: 750;

  /* 모션 — ANALYSIS §4 모션 언어 */
  --ease-standard: cubic-bezier(.2, .8, .2, 1);   /* 화면 전환 기본 */
  --ease-out: cubic-bezier(.16, 1, .3, 1);        /* 등장 */
  --ease-in: cubic-bezier(.5, 0, .75, 0);         /* 퇴장 */
  --ease-breathe: cubic-bezier(.45, 0, .55, 1);   /* 숨쉬기(대칭) */
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);  /* 눌림 복귀(살짝 튕김) */
  --ease-emph: cubic-bezier(.2, 0, 0, 1);         /* 공간 이동(카드가 화면으로 커짐) */
  --dur-press: 90ms;       /* 눌림 표시 (반응 100ms 이내) */
  --dur-ripple: 420ms;     /* tap-ripple 퍼짐+사라짐 */
  --dur-fast: 160ms;
  --dur-base: 320ms;       /* 화면 전환 기본(slide·fade) */
  --dur-space: 460ms;      /* space-forward/back (곡선 --ease-emph) */
  --dur-sheet: 280ms;      /* sheet-up */
  --dur-enter: 560ms;      /* menu-enter 카드 1장 */
  --stagger-menu: 60ms;
  --stagger-card: 30ms;
  --stagger-char: 40ms;    /* caption 글자 간격 */
  --dur-breathe: 4000ms;   /* caption-breathe 주기 */
  /* 길이 사다리 — 화면 CSS 는 숫자 ms 대신 이 열 개 중 가까운 것을 쓴다(설정 motion.kiosk_speed 배율·줄이기가 한꺼번에 먹는다) */
  --dur-t1: 90ms; --dur-t2: 160ms; --dur-t3: 240ms; --dur-t4: 320ms; --dur-t5: 420ms;
  --dur-t6: 560ms; --dur-t7: 720ms; --dur-t8: 900ms; --dur-t9: 1200ms; --dur-t10: 1500ms;
}

/* 가로 1920×1080 */
:root.is-landscape {
  --gutter: calc(80px * var(--ui));
  --topbar-h: calc(112px * var(--ui));
  --bottombar-h: calc(136px * var(--ui));
  --fs-min: max(14px, calc(26px * var(--ui-text) * var(--text-scale)));
  --fs-sm: max(14px, calc(26px * var(--ui-text) * var(--text-scale)));
  --fs-body: max(14px, calc(30px * var(--ui-text) * var(--text-scale)));
  --fs-lg: max(14px, calc(34px * var(--ui-text) * var(--text-scale)));
  --fs-xl: max(14px, calc(40px * var(--ui-text) * var(--text-scale)));
  --fs-title: max(14px, calc(52px * var(--ui-text) * var(--text-scale)));
  --fs-menu: max(14px, calc(48px * var(--ui-text) * var(--text-scale)));
  --fs-display: max(14px, calc(68px * var(--ui-text) * var(--text-scale)));
  --fs-hero: max(14px, calc(84px * var(--ui-text) * var(--text-scale)));
}

/* 큰 글씨 — a11y.large_text_scale(기본 1.35)를 JS 가 --text-scale 로 넣는다 */
:root.is-large { --text-scale: var(--large-scale, 1.35); }

/* 어둡게 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-primary: var(--brand-primary-dark);
  --c-secondary: var(--brand-secondary-dark);
  --c-accent: var(--brand-accent-dark);
  --c-danger: var(--brand-danger-dark);
  --c-warn: #F2B35B;
  --c-on-primary: #04161C;
  --c-bg: #0A1316;
  --c-bg-2: #0E1A1E;
  --c-surface: #121E23;
  --c-surface-2: #16252B;
  --c-sunken: #0D171B;
  --c-overlay: rgb(0 0 0 / 0.62);
  --c-text: #E8EFF2;
  --c-text-2: #A8B8BF;
  --c-text-3: #7F9098;
  --c-text-inverse: #04161C;
  --c-line: #22333A;
  --c-line-strong: #2E434B;
  --c-primary-soft: color-mix(in oklab, var(--c-primary) 15%, var(--c-surface));
  --c-primary-soft-2: color-mix(in oklab, var(--c-primary) 26%, var(--c-surface));
  --c-primary-strong: color-mix(in oklab, var(--c-primary) 80%, #fff);
  --c-primary-deep: color-mix(in oklab, var(--c-primary) 30%, #03090B);
  --c-secondary-soft: color-mix(in oklab, var(--c-secondary) 15%, var(--c-surface));
  --c-accent-soft: color-mix(in oklab, var(--c-accent) 16%, var(--c-surface));
  --c-danger-soft: color-mix(in oklab, var(--c-danger) 16%, var(--c-surface));
  --c-warn-soft: #33250E;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -12px rgb(0 0 0 / 0.6);
  --shadow-3: 0 4px 12px rgb(0 0 0 / 0.4), 0 40px 90px -20px rgb(0 0 0 / 0.8);
  --shadow-press: 0 1px 2px rgb(0 0 0 / 0.5);
}

/* 고대비 — 흑/백·노랑 강조, 대비 7:1 이상, 그림자·그러데이션 없음, 테두리 3px (테마와 무관하게 한 벌) */
:root.is-contrast {
  color-scheme: dark;
  --c-primary: #FFD400;
  --c-secondary: #FFD400;
  --c-accent: #FFD400;
  --c-danger: #FF8A80;
  --c-warn: #FFD400;
  --c-on-primary: #000000;
  --c-bg: #000000; --c-bg-2: #000000;
  --c-surface: #000000; --c-surface-2: #000000; --c-sunken: #000000;
  --c-overlay: rgb(0 0 0 / 0.86);
  --c-text: #FFFFFF; --c-text-2: #FFFFFF; --c-text-3: #E6E6E6; --c-text-inverse: #000000;
  --c-line: #FFFFFF; --c-line-strong: #FFFFFF;
  --c-focus: #FFD400;
  --c-primary-soft: #000000; --c-primary-soft-2: #1A1A1A; --c-primary-strong: #FFD400; --c-primary-deep: #000000;
  --c-secondary-soft: #000000; --c-accent-soft: #000000; --c-danger-soft: #000000; --c-warn-soft: #000000;
  --shadow-1: none; --shadow-2: none; --shadow-3: none; --shadow-press: none;
  --border-w: calc(3px * var(--ui));
}

/* 모션 줄이기(시스템 설정 또는 a11y.reduced_motion=on → JS 가 .motion-reduced) */
:root.motion-reduced {
  --dur-ripple: 0ms;
  --dur-base: 160ms;
  --dur-space: 160ms;
  --dur-sheet: 160ms;
  --dur-enter: 160ms;
  --stagger-menu: 0ms;
  --stagger-card: 0ms;
  --stagger-char: 0ms;
  --dur-t3: 160ms; --dur-t4: 160ms; --dur-t5: 160ms; --dur-t6: 160ms; --dur-t7: 160ms; --dur-t8: 160ms; --dur-t9: 160ms; --dur-t10: 160ms;   /* 긴 연출은 짧은 페이드 길이로 */
}
@media (prefers-reduced-motion: reduce) {
  :root:not(.motion-full) {
    --dur-ripple: 0ms; --dur-base: 160ms; --dur-space: 160ms; --dur-sheet: 160ms; --dur-enter: 160ms;
    --stagger-menu: 0ms; --stagger-card: 0ms; --stagger-char: 0ms;
    --dur-t3: 160ms; --dur-t4: 160ms; --dur-t5: 160ms; --dur-t6: 160ms; --dur-t7: 160ms; --dur-t8: 160ms; --dur-t9: 160ms; --dur-t10: 160ms;
  }
}