/*
 * Jolvex design tokens — apps/web/src/public/styles/tokens.css
 *
 * The single source of raw values for the public UI (design-system.json
 * `tokenSources`). Values are verbatim from the frozen M11-B2 Warm Signal
 * Press contract (docs/design/ui-references/20260915-m11/index.html, the
 * single visual authority): paper #FFFFFF canvas, coral #E4572E brand accent
 * for signal rules and markers, darker action token #D24623 with white ink
 * (4.53:1) for small primary buttons and filled tags, #B53A1E for small
 * accent text on white, navy #29335C as ink and solid structure, the navy
 * tint scale #656C8A (muted ink) / #9FA3B6 (strong border) / #DDDEE5
 * (border) / #F0E7E3 (ghost display ink), amber #F3A712 for warning fill
 * only, navy-night dark family #151932/#242B4D with ghost #2A3054, and the
 * 3px solid focus ring token #24547A (light) / #8FC9FF (dark remap). The
 * language is zero-gradient: depth comes from the frozen flat shadows and
 * solid fills only. This file is not edited unilaterally: every value here
 * mirrors the frozen contract; changing it means changing the contract
 * first. The canonical light names are remapped to the frozen
 * `--color-dark-*` palette under `[data-theme="dark"]` (DS-007: same
 * hierarchy, non-mechanical dark theme; `system` resolves to light or dark
 * and never becomes a third palette). The remap is screen-only
 * (`not print`): printed legal surfaces always resolve the canonical tokens
 * to the frozen light pair, whatever the applied theme.
 */

:root {
  /* color — light theme (frozen M11-B2 Warm Signal Press pair) */
  --color-accent: #E4572E;
  --color-action-accent: #D24623;
  --color-accent-hover: #C43B20;
  --color-accent-ink: #FFFFFF;
  --color-accent-soft: #FCE8E2;
  --color-accent-text: #B53A1E;
  --color-accent-deep: #29335C;
  --color-bg: #FFFFFF;
  --color-bg-subtle: #FFF5F2;
  --color-border: #DDDEE5;
  --color-border-strong: #9FA3B6;
  --color-danger: #A12828;
  --color-danger-soft: #FBE2E0;
  --color-focus: #24547A;
  --color-info: #24547A;
  --color-info-soft: #E0EFFA;
  --color-success: #126247;
  --color-success-soft: #DDF3EA;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-text: #29335C;
  --color-text-muted: #656C8A;
  --color-ghost: #F0E7E3;
  --color-warning: #7A4100;
  --color-warning-soft: #FFF0CF;
  --color-warning-fill: #F3A712;

  /* color — dark theme palette (frozen M11-B2 names; applied by the remap below) */
  --color-dark-accent: #E4572E;
  --color-dark-action-accent: #D24623;
  --color-dark-accent-hover: #C43B20;
  --color-dark-accent-ink: #FFFFFF;
  --color-dark-accent-soft: #3B2433;
  --color-dark-accent-text: #F58A6E;
  --color-dark-accent-deep: #F3A712;
  --color-dark-bg: #151932;
  --color-dark-bg-subtle: #1D2342;
  --color-dark-border: #3F486D;
  --color-dark-border-strong: #9097B5;
  --color-dark-danger: #FF8C8C;
  --color-dark-danger-soft: #3A1518;
  --color-dark-focus: #8FC9FF;
  --color-dark-info: #8FC9FF;
  --color-dark-info-soft: #12283C;
  --color-dark-success: #6DD3AE;
  --color-dark-success-soft: #123430;
  --color-dark-surface: #242B4D;
  --color-dark-surface-raised: #2A3054;
  --color-dark-text: #FFFFFF;
  --color-dark-text-muted: #C2C6D6;
  --color-dark-ghost: #2A3054;
  --color-dark-warning: #FFC16A;
  --color-dark-warning-soft: #3A2A10;

  /* duration (frozen) */
  --duration-base: 220ms;
  --duration-fast: 120ms;
  --duration-signature: 650ms;

  /* easing (frozen) */
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* font family (frozen) */
  --font-body: "Noto Sans TC", "Noto Sans", sans-serif;
  --font-display: "Afacad Flux", "Noto Sans TC", sans-serif;
  --font-mono: "IBM Plex Mono", "Noto Sans Mono", monospace;

  /* font size (frozen; heading-md/heading-xs added by the 2026-09-04 admin
     density revision — no existing value changed) */
  --text-body: 1rem;
  --text-body-lg: 1.125rem;
  --text-caption: 0.75rem;
  --text-display: clamp(2.625rem, 6.5vw, 5rem);
  --text-heading: 2rem;
  --text-heading-lg: 3rem;
  --text-heading-md: 1.75rem;
  --text-heading-sm: 1.375rem;
  --text-heading-xs: 1.125rem;
  --text-label: 0.875rem;

  /* font weight (frozen) */
  --weight-bold: 700;
  --weight-medium: 500;
  --weight-regular: 400;
  --weight-semibold: 600;

  /* line height (frozen) */
  --leading-body: 1.625;
  --leading-body-lg: 1.6;
  --leading-caption: 1.5;
  --leading-display: 1.1;
  --leading-heading: 1.2;
  --leading-heading-lg: 1.16;
  --leading-label: 1.5;
  --leading-mono: 1.5;

  /* radius (frozen) */
  --radius-lg: 0.75rem;
  --radius-md: 0.75rem;
  --radius-pill: 999px;
  --radius-sm: 0.375rem;

  /* shadow (reconciled pair: ink rgba derives from navy #29335C and the dark
     family ground #151932) */
  --shadow-focus: 0 0 0 0.1875rem rgba(41, 51, 92, 0.32);
  --shadow-overlay: 0 1.5rem 5rem rgba(21, 25, 50, 0.18);
  --shadow-press: 0.3125rem 0.3125rem 0 var(--color-text);
  --shadow-raised: 0 0.75rem 2.25rem rgba(41, 51, 92, 0.08);

  /* size (frozen) */
  --size-admin-drawer: min(20rem, calc(100vw - 2rem));
  --size-admin-sidebar-compact: 4.5rem;
  /* 2026-09-05 M6b wireframe/reference revision: 18rem → 15rem (DS-014) */
  --size-admin-sidebar-expanded: 15rem;
  /* Media features for the tri-mode admin shell: CSS media queries cannot read
     custom properties, so the JS resize listeners read these from :root and the
     CSS preludes carry their own literals (both live in token sources). */
  --media-admin-rail: (min-width: 768px);
  --media-admin-wide: (min-width: 1200px);
  /* Public content compact band (UI-016 filter drawer): the client drawer sync
     reads this from :root exactly like the admin shell listeners. */
  --media-content-compact: (max-width: 48rem);
  --size-container-content: 72rem;
  --size-container-dialog: 36rem;
  --size-container-narrow: 45rem;
  --size-container-shell: 90rem;
  --size-measure-body: 72ch;
  --size-measure-display-en: 16ch;
  --size-measure-display-zh: 10ch;
  --size-measure-legal: 70ch;
  --size-table-row-comfortable: 3.25rem;
  --size-table-row-compact: 2.75rem;

  /* space (frozen) */
  --space-1: 0.25rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  color-scheme: light;
}

/*
 * Dark theme remap (screen only, `not print`): canonical semantic names
 * resolve to the frozen dark palette. No new values are introduced; the
 * focus shadow composes the frozen dark focus token with the frozen ring
 * geometry. The pair's new accent-role tokens remap the same way
 * (--color-action-accent/--color-accent-text keep the action coral and gain
 * the bright dark accent-text), while --color-warning-fill stays the single
 * amber value in both themes (the pair defines one warning fill; amber holds
 * its role on both canvases). Semantic softs resolve to their own dark tints
 * (2026-09-04 density revision) so status badges stay distinguishable in
 * dark. Excluding print keeps paper output on the light pair — the print
 * rules in public.css source `--color-surface`/`--color-text` and must never
 * resolve to the dark palette.
 */
@media not print {
  [data-theme="dark"] {
    --color-accent: var(--color-dark-accent);
    --color-accent-hover: var(--color-dark-accent-hover);
    --color-accent-ink: var(--color-dark-accent-ink);
    --color-accent-soft: var(--color-dark-accent-soft);
    --color-accent-deep: var(--color-dark-accent-deep);
    --color-action-accent: var(--color-dark-action-accent);
    --color-accent-text: var(--color-dark-accent-text);
    --color-bg: var(--color-dark-bg);
    --color-bg-subtle: var(--color-dark-bg-subtle);
    --color-border: var(--color-dark-border);
    --color-border-strong: var(--color-dark-border-strong);
    --color-danger: var(--color-dark-danger);
    --color-danger-soft: var(--color-dark-danger-soft);
    --color-focus: var(--color-dark-focus);
    --color-info: var(--color-dark-info);
    --color-info-soft: var(--color-dark-info-soft);
    --color-success: var(--color-dark-success);
    --color-success-soft: var(--color-dark-success-soft);
    --color-surface: var(--color-dark-surface);
    --color-surface-raised: var(--color-dark-surface-raised);
    --color-text: var(--color-dark-text);
    --color-text-muted: var(--color-dark-text-muted);
    --color-ghost: var(--color-dark-ghost);
    --color-warning: var(--color-dark-warning);
    --color-warning-soft: var(--color-dark-warning-soft);
    --shadow-focus: 0 0 0 0.1875rem var(--color-dark-focus);
    color-scheme: dark;
  }
}