/* ============================================================================
   ATOM Design System — Design Tokens
   ----------------------------------------------------------------------------
   Light is the base palette on :root.
   Dark is redefined three times so every theme state resolves correctly:
     1. @media (prefers-color-scheme: dark) guarded by :not([data-theme="light"])
     2. :root[data-theme="dark"]  (explicit user choice wins in both directions)
   Never give a color its only definition inside a media block.
   ========================================================================== */

:root {
  /* --- Palette: neutral ------------------------------------------------- */
  --atom-gray-00: #ffffff;
  --atom-gray-50: #f9f9fa;
  --atom-gray-100: #f3f3f5;
  --atom-gray-200: #ebecef;
  --atom-gray-300: #dcdde3;
  --atom-gray-400: #c0c2cc;
  --atom-gray-500: #9fa1ad;
  --atom-gray-600: #7a7c8b;
  --atom-gray-700: #55586d;
  --atom-gray-800: #33343d;
  --atom-gray-900: #1a1b20;
  --atom-gray-1000: #0f1014;

  /* --- Palette: primary (brand) — base is primary-600 -------------------- */
  --atom-primary-50: #f1f1fb;
  --atom-primary-100: #dadcf6;
  --atom-primary-200: #c2c5f0;
  --atom-primary-500: #5d64cb;
  --atom-primary-600: #383fae;
  --atom-primary-700: #2d338b;

  /* --- Palette: semantic accents ----------------------------------------
     `blue` sits in the cyan half (~194 deg) on purpose: it drives
     fg-informative, and at the brand's 236 deg the two were only 25 deg
     apart — an info icon read as a brand accent. */
  --atom-blue-50: #f1f9fb;
  --atom-blue-100: #d5eef6;
  --atom-blue-600: #0e7290;
  --atom-green-50: #e9f8ef;
  --atom-green-100: #d1f0dd;
  --atom-green-500: #12b76a;
  --atom-green-700: #1a7f4b;
  --atom-red-50: #fdeded;
  --atom-red-100: #fbdcdc;
  --atom-red-600: #e5484d;
  --atom-red-700: #c62b31;
  --atom-yellow-50: #fff8e6;
  --atom-yellow-100: #ffefc4;
  --atom-yellow-700: #9a6800;

  /* --- Surfaces --------------------------------------------------------- */
  --atom-bg-canvas: var(--atom-gray-00);
  --atom-bg-layer: var(--atom-gray-00);
  --atom-bg-layer-raised: var(--atom-gray-00);
  --atom-bg-neutral-weak: var(--atom-gray-100);
  --atom-bg-neutral-solid: var(--atom-gray-900);
  --atom-bg-placeholder: var(--atom-gray-100);
  --atom-bg-scrim: rgba(0, 0, 0, 0.5);
  /* Tooltips stay a dark chip in both themes — in dark they must sit *above*
     the card surface, so they get their own pair rather than reusing the
     inverted neutral scale. */
  --atom-bg-tooltip: #1a1b20;
  --atom-fg-tooltip: #ffffff;
  --atom-skeleton-shimmer: rgba(255, 255, 255, 0.6);

  /* Interactive overlays — the header + sidebar active pills. Tinted with the
     brand rather than plain black so a selected item reads as "current" and not
     merely "shaded". Alpha runs higher than the neutral version did: a coloured
     wash at the same opacity reads weaker than black. */
  --atom-bg-nav-active: rgba(56, 63, 174, 0.05);
  --atom-bg-nav-hover: rgba(56, 63, 174, 0.038);
  --atom-bg-side-active: rgba(56, 63, 174, 0.09);
  --atom-bg-side-hover: rgba(56, 63, 174, 0.053);

  /* --- Foreground ------------------------------------------------------- */
  --atom-fg-neutral: #1a1b20;
  --atom-fg-neutral-muted: #55586d;
  --atom-fg-neutral-subtle: var(--atom-gray-500);
  --atom-fg-side-item: #55586d;
  --atom-fg-on-solid: var(--atom-gray-00);
  --atom-fg-brand: var(--atom-primary-600);
  --atom-fg-placeholder-icon: var(--atom-gray-300);

  /* --- Borders ---------------------------------------------------------- */
  --atom-border-subtle: var(--atom-gray-200);
  --atom-border-default: var(--atom-gray-300);
  --atom-border-strong: var(--atom-gray-900);

  /* --- Elevation -------------------------------------------------------- */
  --atom-shadow-s1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --atom-shadow-s2: 0 2px 8px rgba(0, 0, 0, 0.08);
  --atom-shadow-s3: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* --- Semantic status pairs --------------------------------------------
     Derived from the palette above, so a single declaration resolves in both
     themes — the palette is what gets redefined for dark. */
  --atom-bg-critical-solid: var(--atom-red-600);
  --atom-bg-critical-weak: var(--atom-red-50);
  --atom-fg-critical: var(--atom-red-600);
  --atom-fg-critical-contrast: var(--atom-red-700);
  --atom-bg-positive-weak: var(--atom-green-50);
  --atom-fg-positive: var(--atom-green-500);
  --atom-fg-positive-contrast: var(--atom-green-700);
  --atom-bg-informative-weak: var(--atom-blue-50);
  --atom-fg-informative: var(--atom-blue-600);
  --atom-bg-warning-weak: var(--atom-yellow-50);
  --atom-fg-warning: var(--atom-yellow-700);

  /* --- Chart series (validated, not derived from the ramps above) --------
     A categorical palette answers a job none of the ramps above can: telling
     series apart. The ramps here are built for UI state, so they offer three
     usable hue families and reserve green/red/yellow for status — and a status
     hue must never impersonate a series.

     So these six are new steps, chosen against the six checks in
     scripts/validate_palette.js of the data-viz method and re-run on every
     change. Slot 1 is primary-600 unchanged, so a one-series chart is brand
     coloured. Measured on the light chart surface (#ffffff), adjacent pairlist:
     worst CVD ΔE 10.5 (deutan), worst normal-vision ΔE 31.1. Slot 4 sits at
     2.17:1 — under 3:1 by design, which obliges the relief rule (visible
     labels or the table view), never colour alone.

     The order is the colour-blind-safety mechanism, not taste. Do not reorder
     or add a seventh without re-running the validator. */
  --atom-chart-series-1: #383fae;
  --atom-chart-series-2: #eb6834;
  --atom-chart-series-3: #0b8fb5;
  --atom-chart-series-4: #eda100;
  --atom-chart-series-5: #c2379b;
  --atom-chart-series-6: #1a7f4b;

  /* Ink for a label set inside a series fill. Slots 2·3·4 measure 3.20 / 3.74 /
     2.17 against white — under 4.5:1 for an 11px label — while ink on the same
     three fills measures 5.37 / 4.59 / 7.94. Those slots use this; 1·5·6 stay on
     --atom-fg-on-solid (8.43 / 4.87 / 5.02). In dark mode every slot wants ink,
     and --atom-fg-on-solid already resolves to it, so this value matches. */
  --atom-chart-on-fill-ink: #1a1b20;

  /* --- Docs surfaces ----------------------------------------------------
     The demo stage has to sit a step away from bg-neutral-weak: a `weak`
     variant or a readonly input placed on it would otherwise vanish into the
     background. gray-200 keeps that contrast in both themes. */
  --atom-bg-stage: var(--atom-gray-200);
  --atom-bg-code: var(--atom-gray-50);

  /* --- Radius (measured from source) ------------------------------------ */
  --atom-radius-r1: 4px;
  --atom-radius-r2: 8px;
  --atom-radius-r3: 12px;
  --atom-radius-r4: 16px;
  --atom-radius-full: 9999px;

  /* --- Control surface ---------------------------------------------------
     The box a Field's Control slot holds — Input, Textarea, Select, Multi
     Select, Date Input, Time Input, Input Button. A field can put two or three
     of them in one row, so the height, the resting border and the focus ring
     are one decision here instead of seven. Button keeps its own height and is
     stretched to the row by field.css when it joins a combination.

     48 / 40 / 56 happen to equal x12 / x10 / x14, but a control height is not
     spacing — moving the spacing scale must not move a control.

     The rings are whole `box-shadow` values, not widths and colours, because
     every control draws its border as an inset shadow: one token then replaces
     the whole declaration and the states cannot drift apart.

     The resting width is 1px — Button's, since a Button standing in a control
     row is the one member whose border ATOM does not own. hover keeps that
     width and only darkens. The two state rings stay 2px: Button's own focus
     ring is 2px too, and a state has to read from further away than an edge. */
  --atom-control-h: 48px;
  --atom-control-h-small: 40px;
  --atom-control-h-large: 56px;
  --atom-control-border: inset 0 0 0 1px var(--atom-border-default);
  --atom-control-border-hover: inset 0 0 0 1px var(--atom-fg-neutral-subtle);
  --atom-control-border-focus: inset 0 0 0 2px var(--atom-primary-600);
  --atom-control-border-invalid: inset 0 0 0 2px var(--atom-fg-critical);

  /* --- Spacing: x-scale (measured from source) -------------------------- */
  --atom-x1: 4px;
  --atom-x2: 8px;
  --atom-x3: 12px;
  --atom-x4: 16px;
  --atom-x5: 20px;
  --atom-x6: 24px;
  --atom-x7: 28px;
  --atom-x8: 32px;
  --atom-x10: 40px;
  --atom-x12: 48px;
  --atom-x14: 56px;

  /* --- Typography ------------------------------------------------------- */
  --atom-font-sans: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --atom-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* --- Typography: t-scale (sizes measured from source) ---------------- */
  /* Size and line-height are separate tokens so either can be overridden
     alone. Tracking only exists from t7 up; below that it is `normal`. */
  --atom-t1-size: 11px;
  --atom-t1-line: 1.4;
  --atom-t2-size: 12px;
  --atom-t2-line: 1.5;
  --atom-t3-size: 13px;
  --atom-t3-line: 1.5;
  --atom-t4-size: 14px;
  --atom-t4-line: 1.55;
  --atom-t5-size: 15px;
  --atom-t5-line: 1.7;
  --atom-t6-size: 16px;
  --atom-t6-line: 1.7;
  --atom-t7-size: 18px;
  --atom-t7-line: 1.5;
  --atom-t7-tracking: -0.01em;
  --atom-t8-size: 20px;
  --atom-t8-line: 1.45;
  --atom-t8-tracking: -0.01em;
  --atom-t9-size: 24px;
  --atom-t9-line: 1.45;
  --atom-t9-tracking: -0.01em;
  --atom-t10-size: 32px;
  --atom-t10-line: 1.25;
  --atom-t10-tracking: -0.02em;
  --atom-t11-size: 44px;
  --atom-t11-line: 1.15;
  --atom-t11-tracking: -0.02em;
  --atom-t12-size: 60px;
  --atom-t12-line: 1.1;
  --atom-t12-tracking: -0.025em;

  /* --- Typography: weight ---------------------------------------------- */
  --atom-weight-regular: 400;
  --atom-weight-medium: 500;
  --atom-weight-semibold: 600;
  --atom-weight-bold: 700;

  /* --- Layout ------------------------------------------------------------
     The shell is full-bleed, so only the fixed columns are tokens — main takes
     whatever is left. The source's 1552px cap (and its 1312 / 1112 main widths)
     no longer exist; see .atom-layout in layout.css. */
  --atom-header-h: 76px;
  --atom-sidebar-w: 240px;
  --atom-toc-w: 200px;
  --atom-sidebar-item-h: 36px;

  /* --- Motion ----------------------------------------------------------- */
  --atom-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --atom-duration-fast: 120ms;
  --atom-duration-base: 200ms;
  --atom-duration-slow: 600ms;

  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   Dark — system preference (only when the user has not forced light)
   ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --atom-gray-00: #161618;
    --atom-gray-50: #1a1b1f;
    --atom-gray-100: #1d1e25;
    --atom-gray-200: #24252b;
    --atom-gray-300: #2f3038;
    --atom-gray-400: #4a4c56;
    --atom-gray-500: #6f717d;
    --atom-gray-600: #9697a0;
    --atom-gray-700: #b4b5bc;
    --atom-gray-800: #dcdde3;
    --atom-gray-900: #eaeaec;
    --atom-gray-1000: #f3f3f5;

    --atom-primary-50: #101232;
    --atom-primary-100: #161945;
    --atom-primary-200: #202564;
    --atom-primary-500: #868cea;
    --atom-primary-600: #4750d1;
    --atom-primary-700: #9da2f1;

    --atom-blue-50: #0e282f;
    --atom-blue-100: #153742;
    --atom-blue-600: #51c7ec;
    --atom-green-50: #0d2118;
    --atom-green-100: #123222;
    --atom-green-500: #34d391;
    --atom-green-700: #5fdca7;
    --atom-red-50: #2b1315;
    --atom-red-100: #3d1a1c;
    --atom-red-600: #ff6369;
    --atom-red-700: #ff8d91;
    --atom-yellow-50: #241a05;
    --atom-yellow-100: #35270a;
    --atom-yellow-700: #e0b44b;

    --atom-bg-canvas: #161618;
    /* bg-layer must stay lighter than bg-placeholder so preview surfaces read
       as cards sitting *on* the thumbnail frame, the way they do in light. */
    --atom-bg-layer: #26272e;
    --atom-bg-layer-raised: #2f3038;
    --atom-bg-neutral-weak: #2f3038;
    --atom-bg-neutral-solid: #f3f3f5;
    --atom-bg-placeholder: #1d1e25;
    --atom-bg-scrim: rgba(0, 0, 0, 0.6);
    --atom-bg-tooltip: #3a3b45;
    --atom-fg-tooltip: #f3f3f5;
    --atom-skeleton-shimmer: rgba(255, 255, 255, 0.07);

    --atom-bg-nav-active: rgba(157, 162, 241, 0.085);
    --atom-bg-nav-hover: rgba(157, 162, 241, 0.06);
    --atom-bg-side-active: rgba(157, 162, 241, 0.15);
    --atom-bg-side-hover: rgba(157, 162, 241, 0.095);

    --atom-fg-neutral: #eaeaec;
    --atom-fg-neutral-muted: #9697a0;
    --atom-fg-neutral-subtle: #6f717d;
    --atom-fg-side-item: #b4b5bc;
    --atom-fg-on-solid: #161618;
    --atom-fg-brand: var(--atom-primary-700);
    --atom-fg-placeholder-icon: #3a3b45;

    --atom-border-subtle: #24252b;
    --atom-border-default: #2f3038;
    --atom-border-strong: #eaeaec;

    /* red-600 is lightened for readable text in dark; a solid fill has to stay
       dark enough to carry a white label. */
    --atom-bg-critical-solid: #c8353a;

    --atom-shadow-s1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --atom-shadow-s2: 0 2px 8px rgba(0, 0, 0, 0.5);
    --atom-shadow-s3: 0 8px 24px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
  }

    /* Chart series — re-stepped for the dark surface (#26272e), not flipped.
       Validated as a set: adjacent worst CVD ΔE 9.7 (deutan) / 8.4 (tritan),
       worst normal-vision ΔE 22.9, all six clear 3:1. Slots 1 and 3 sit further
       apart here than a straight lightening would put them — at the lighter
       steps indigo and teal collapsed to ΔE 13.8, under the 15 floor. */
    --atom-chart-series-1: #8069e2;
    --atom-chart-series-2: #e0703c;
    --atom-chart-series-3: #0fa5bd;
    --atom-chart-series-4: #bd8708;
    --atom-chart-series-5: #cc4fa4;
    --atom-chart-series-6: #22a866;
    --atom-chart-on-fill-ink: #161618;

}

/* ---------------------------------------------------------------------------
   Dark — explicit user choice (must win over prefers-color-scheme: light)
   ------------------------------------------------------------------------ */
:root[data-theme="dark"] {
  --atom-gray-00: #161618;
  --atom-gray-50: #1a1b1f;
  --atom-gray-100: #1d1e25;
  --atom-gray-200: #24252b;
  --atom-gray-300: #2f3038;
  --atom-gray-400: #4a4c56;
  --atom-gray-500: #6f717d;
  --atom-gray-600: #9697a0;
  --atom-gray-700: #b4b5bc;
  --atom-gray-800: #dcdde3;
  --atom-gray-900: #eaeaec;
  --atom-gray-1000: #f3f3f5;

  --atom-primary-50: #101232;
  --atom-primary-100: #161945;
  --atom-primary-200: #202564;
  --atom-primary-500: #868cea;
  --atom-primary-600: #4750d1;
  --atom-primary-700: #9da2f1;

  --atom-blue-50: #0e282f;
  --atom-blue-100: #153742;
  --atom-blue-600: #51c7ec;
  --atom-green-50: #0d2118;
  --atom-green-100: #123222;
  --atom-green-500: #34d391;
  --atom-green-700: #5fdca7;
  --atom-red-50: #2b1315;
  --atom-red-100: #3d1a1c;
  --atom-red-600: #ff6369;
  --atom-red-700: #ff8d91;
  --atom-yellow-50: #241a05;
  --atom-yellow-100: #35270a;
  --atom-yellow-700: #e0b44b;

  --atom-bg-canvas: #161618;
  /* See the note in the prefers-color-scheme block above. */
  --atom-bg-layer: #26272e;
  --atom-bg-layer-raised: #2f3038;
  --atom-bg-neutral-weak: #2f3038;
  --atom-bg-neutral-solid: #f3f3f5;
  --atom-bg-placeholder: #1d1e25;
  --atom-bg-scrim: rgba(0, 0, 0, 0.6);
  --atom-bg-tooltip: #3a3b45;
  --atom-fg-tooltip: #f3f3f5;
  --atom-skeleton-shimmer: rgba(255, 255, 255, 0.07);

  --atom-bg-nav-active: rgba(157, 162, 241, 0.085);
  --atom-bg-nav-hover: rgba(157, 162, 241, 0.06);
  --atom-bg-side-active: rgba(157, 162, 241, 0.15);
  --atom-bg-side-hover: rgba(157, 162, 241, 0.095);

  --atom-fg-neutral: #eaeaec;
  --atom-fg-neutral-muted: #9697a0;
  --atom-fg-neutral-subtle: #6f717d;
  --atom-fg-side-item: #b4b5bc;
  --atom-fg-on-solid: #161618;
  --atom-fg-brand: var(--atom-primary-700);
  --atom-fg-placeholder-icon: #3a3b45;

  --atom-border-subtle: #24252b;
  --atom-border-default: #2f3038;
  --atom-border-strong: #eaeaec;

  /* red-600 is lightened for readable text in dark; a solid fill has to stay
     dark enough to carry a white label. */
  --atom-bg-critical-solid: #c8353a;

  --atom-shadow-s1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --atom-shadow-s2: 0 2px 8px rgba(0, 0, 0, 0.5);
  --atom-shadow-s3: 0 8px 24px rgba(0, 0, 0, 0.6);

  color-scheme: dark;

  /* Chart series — re-stepped for the dark surface (#26272e), not flipped.
     Validated as a set: adjacent worst CVD ΔE 9.7 (deutan) / 8.4 (tritan),
     worst normal-vision ΔE 22.9, all six clear 3:1. Slots 1 and 3 sit further
     apart here than a straight lightening would put them — at the lighter
     steps indigo and teal collapsed to ΔE 13.8, under the 15 floor. */
  --atom-chart-series-1: #8069e2;
  --atom-chart-series-2: #e0703c;
  --atom-chart-series-3: #0fa5bd;
  --atom-chart-series-4: #bd8708;
  --atom-chart-series-5: #cc4fa4;
  --atom-chart-series-6: #22a866;
  --atom-chart-on-fill-ink: #161618;

}

/* Explicit light must also win over a dark system preference. The base :root
   block already holds every light value, so this only needs color-scheme. */
:root[data-theme="light"] {
  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   Sidebar item height steps up with viewport (measured: 36 / 38 / 40)
   ------------------------------------------------------------------------ */
@media (min-width: 1120px) {
  :root {
    --atom-sidebar-item-h: 38px;
  }
}
@media (min-width: 1280px) {
  :root {
    --atom-sidebar-item-h: 40px;
  }
}