/* Design tokens (spec 6-1 colors, 6-3 type scale, 6-4 spacing/radius/shadow/motion).
   Theme and text size switch ONLY here: <html data-theme="light|dark" data-text="m|l|xl">.
   Other stylesheets use var(--...) for every color and font size. */

:root {
  color-scheme: light;

  /* 6-1 colors, light */
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --surface-2: #EDF1F6;
  --text: #1B2433;
  --text-2: #4B5566;
  --primary: #26457A;
  --on-primary: #FFFFFF;
  --primary-pressed: #1C355F;
  --primary-soft: #E8EEF7;
  --danger: #B42318;
  --on-danger: #FFFFFF;
  --danger-soft: #FDECEA;
  --warn: #8A4B00;
  --warn-soft: #FFF3DC;
  --ok: #1E6B3E;
  --ok-soft: #E7F5EC;
  --border-input: #7A8496;
  --divider: #D6DCE4;
  --focus: #2F6FEB;
  --scrim: rgba(16, 21, 28, .48);
  --transparent: rgba(0, 0, 0, 0);

  /* 6-4 shadows (dark: none) */
  --shadow-sheet: 0 -4px 24px rgba(16, 21, 28, .16);
  --shadow-fab: 0 4px 12px rgba(16, 21, 28, .24);
  --shadow-card: 0 1px 2px rgba(16, 21, 28, .06);
  --layer-border: var(--transparent);

  /* 6-3 type: --scale 1 / 1.12 / 1.24, base in rem so the phone's own text size also applies.
     Written as calc(N / 16 * 1rem * scale): the spec's "Npx/16 * 1rem" would multiply two lengths (invalid CSS). */
  --scale: 1;
  --fs-caption: calc(15 / 16 * 1rem * var(--scale));
  --fs-body-sm: calc(16 / 16 * 1rem * var(--scale));
  --fs-body: calc(17 / 16 * 1rem * var(--scale));
  --fs-name: calc(19 / 16 * 1rem * var(--scale));
  --fs-section: calc(20 / 16 * 1rem * var(--scale));
  --fs-title: calc(24 / 16 * 1rem * var(--scale));
  --fs-display: calc(28 / 16 * 1rem * var(--scale));
  --fs-tab: calc(14 / 16 * 1rem);
  /* S01/S02/S04 text-size buttons show each step at its own size (not scaled) */
  --fs-preview-m: calc(17 / 16 * 1rem);
  --fs-preview-l: calc(17 * 1.12 / 16 * 1rem);
  --fs-preview-xl: calc(17 * 1.24 / 16 * 1rem);
  --lh-caption: 1.45;
  --lh-body-sm: 1.5;
  --lh-body: 1.55;
  --lh-name: 1.35;
  --lh-section: 1.3;
  --lh-title: 1.3;
  --lh-display: 1.2;
  --font: 'Pretendard', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;

  /* 6-4 spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --gutter: 16px;

  /* 6-4 radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-sheet: 20px;
  --r-pill: 999px;

  /* 6-4 motion (reduced motion -> 0ms) */
  --t-sheet-in: 180ms;
  --t-sheet-out: 140ms;
  --t-toast: 150ms;
  --t-fold: 200ms;
  --t-press: 80ms;
  --ease: ease-out;

  /* 6-5 touch sizes, 6-4 layout */
  --touch: 48px;
  --btn-lg: 56px;
  --tabbar-h: 64px;
  --topbar-h: 56px;
  --fab: 56px;
  --content-max: 560px;
}

:root[data-text="l"] { --scale: 1.12; }
:root[data-text="xl"] { --scale: 1.24; --fs-tab: calc(16 / 16 * 1rem); }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10151C;
  --surface: #19212C;
  --surface-2: #222B38;
  --text: #E9EEF5;
  --text-2: #AEB8C7;
  --primary: #9DBEF2;
  --on-primary: #10151C;
  --primary-pressed: #BCD3F7;
  --primary-soft: #243042;
  --danger: #FF8A80;
  --on-danger: #10151C;
  --danger-soft: #3A1D1D;
  --warn: #F5C46B;
  --warn-soft: #3A2E14;
  --ok: #7FD3A1;
  --ok-soft: #173323;
  --border-input: #6B7586;
  --divider: #2C3644;
  --focus: #7FA8FF;
  --scrim: rgba(0, 0, 0, .6);
  --shadow-sheet: none;
  --shadow-fab: none;
  --shadow-card: none;
  --layer-border: var(--divider);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-sheet-in: 0ms;
    --t-sheet-out: 0ms;
    --t-toast: 0ms;
    --t-fold: 0ms;
    --t-press: 0ms;
  }
}