/*
 * JDS — Semantic tokens, LIGHT theme. AN ALIAS/COMPATIBILITY LAYER, NOT THE
 * VERIFIED TIER (owner decision, 2026-09-15).
 *
 * This is NOT judiciary-design-system/tokens/ — that directory is the one
 * checked against the current JDS Figma file and is where new work belongs.
 * This sheet exists because 368 bare `var(--jds-*)` references across 29
 * files in design-system/src read it directly with NO fallback, so deleting
 * or repointing it is real pixel risk on components already slated for
 * deletion (see docs/design-tokens/README.md). It stays exactly where it is,
 * under docs/design-tokens/, until design-system/ itself is deleted — at
 * which point this file goes with it. Do not treat its contents as
 * Figma-verified, and do not extend it: a new role belongs in
 * judiciary-design-system/tokens/ plus a hand-rolled alias here only if an
 * existing design-system/src consumer forces it.
 *
 * Layer 2 of 3 (primitive → semantic → utility). References the primitives
 * in jds-root.css, resolved for light mode. Import after jds-root.css.
 *
 * Originally generated from the live Figma `Mode` collection (Light mode) —
 * 164 roles, every family — but that provenance predates the 2026-09
 * judiciary-design-system/ pull and is no longer the thing to trust.
 *
 * NAMING NOTE (the one place code ≠ Figma verbatim, for readability):
 *   Figma primitive `jds/gray/*`  → here `--jds-gray-*`
 *   Figma primitive `jds/color/*` (the maroon ramp) → here `--jds-primary-*`
 *   All other primitive ramps (blue/green/red/yellow/purple/cyan) match 1:1.
 *
 * Secondary (navy) is reserved/hidden in Figma (nothing uses it yet); its
 * roles are kept below, commented, so the palette is complete when un-hidden.
 */

:root {
  /* ================= Neutrals — page / surface / text / border ================= */
  --jds-bg-default: var(--jds-gray-0);
  --jds-bg-alternate: var(--jds-gray-50);
  --jds-bg-fixed-light: var(--jds-gray-0);
  --jds-bg-fixed-dark: var(--jds-gray-1100);
  --jds-bg-overlay: #0E0E0E80;
  --jds-bg-translucent: #0E0E0E1A;
  --jds-bg-translucent-subtle: #0E0E0E0D;
  --jds-bg-translucent-inverse: #FFFFFF1A;
  --jds-bg-translucent-fixed-dark: #0E0E0E1A;
  --jds-bg-translucent-fixed-light: #FFFFFF1A;
  --jds-bg-transparent: #FFFFFF00;

  --jds-surface-default: var(--jds-gray-0);
  --jds-surface-raised: var(--jds-gray-50);
  --jds-surface-inverse: var(--jds-gray-900);
  --jds-surface-fixed-light: var(--jds-gray-0);
  --jds-surface-fixed-dark: var(--jds-gray-900);

  --jds-color-default: var(--jds-gray-1000);
  --jds-color-subtle: var(--jds-gray-700);
  --jds-color-muted: var(--jds-gray-300);
  --jds-color-inverse: var(--jds-gray-100);
  --jds-color-fixed-light: var(--jds-gray-100);
  --jds-color-fixed-dark: var(--jds-gray-1000);
  --jds-color-transparent: #FFFFFF00;

  --jds-border-color-default: var(--jds-gray-500);
  --jds-border-color-emphasis: var(--jds-gray-800);
  --jds-border-color-muted: var(--jds-gray-200);
  --jds-border-color-fixed-light: var(--jds-gray-0);
  --jds-border-color-fixed-dark: var(--jds-gray-1000);
  --jds-border-color-translucent: #0E0E0E0D;
  --jds-border-color-transparent: #FFFFFF00;

  /* ================= Primary — maroon (interactive / brand) ================= */
  --jds-primary-bg-default: var(--jds-primary-700);
  --jds-primary-bg-muted: var(--jds-primary-100);
  --jds-primary-bg-translucent: #8055BB1A;
  --jds-primary-surface-default: var(--jds-primary-600);   /* action */
  --jds-primary-surface-emphasis: var(--jds-primary-700);  /* pressed */
  --jds-primary-surface-muted: var(--jds-primary-100);
  --jds-primary-surface-translucent: #8055BB1A;
  --jds-primary-color-default: var(--jds-primary-600);
  --jds-primary-color-emphasis: var(--jds-primary-700);
  --jds-primary-color-fixed-light: var(--jds-primary-400);
  --jds-primary-color-fixed-dark: var(--jds-primary-600);
  --jds-primary-border-color-default: var(--jds-primary-600);
  --jds-primary-border-color-emphasis: var(--jds-primary-700);
  --jds-primary-border-color-muted: var(--jds-primary-200);

  /* ================= Accent — blue (informational, non-urgent) ================= */
  --jds-accent-bg-default: var(--jds-blue-700);
  --jds-accent-bg-muted: var(--jds-blue-100);
  --jds-accent-surface-default: var(--jds-blue-600);
  --jds-accent-surface-emphasis: var(--jds-blue-700);
  --jds-accent-surface-muted: var(--jds-blue-100);
  --jds-accent-color-default: var(--jds-blue-600);
  --jds-accent-color-emphasis: var(--jds-blue-700);
  --jds-accent-color-fixed-light: var(--jds-blue-400);
  --jds-accent-color-fixed-dark: var(--jds-blue-600);
  --jds-accent-border-color-default: var(--jds-blue-500);
  --jds-accent-border-color-emphasis: var(--jds-blue-700);
  --jds-accent-border-color-muted: var(--jds-blue-200);

  /* ================= Success — green ================= */
  --jds-success-bg-default: var(--jds-green-700);
  --jds-success-bg-muted: var(--jds-green-100);
  --jds-success-surface-default: var(--jds-green-600);
  --jds-success-surface-emphasis: var(--jds-green-700);
  --jds-success-surface-muted: var(--jds-green-100);
  --jds-success-color-default: var(--jds-green-600);
  --jds-success-color-emphasis: var(--jds-green-700);
  --jds-success-color-fixed-light: var(--jds-green-400);
  --jds-success-color-fixed-dark: var(--jds-green-600);
  --jds-success-border-color-default: var(--jds-green-600);
  --jds-success-border-color-emphasis: var(--jds-green-700);
  --jds-success-border-color-muted: var(--jds-green-200);

  /* ================= Danger — red ================= */
  --jds-danger-bg-default: var(--jds-red-700);
  --jds-danger-bg-muted: var(--jds-red-100);
  --jds-danger-surface-default: var(--jds-red-600);
  --jds-danger-surface-emphasis: var(--jds-red-700);
  --jds-danger-surface-muted: var(--jds-red-100);
  --jds-danger-surface-translucent: #A11B1B14;
  --jds-danger-color-default: var(--jds-red-600);
  --jds-danger-color-emphasis: var(--jds-red-700);
  --jds-danger-color-fixed-light: var(--jds-red-400);
  --jds-danger-color-fixed-dark: var(--jds-red-600);
  --jds-danger-border-color-default: var(--jds-red-600);
  --jds-danger-border-color-emphasis: var(--jds-red-700);
  --jds-danger-border-color-muted: var(--jds-red-200);

  /* ================= Warning — yellow ================= */
  --jds-warning-bg-default: var(--jds-yellow-200);
  --jds-warning-bg-muted: var(--jds-yellow-100);
  --jds-warning-surface-default: var(--jds-yellow-200);
  --jds-warning-surface-emphasis: var(--jds-yellow-600);
  --jds-warning-surface-muted: var(--jds-yellow-100);
  --jds-warning-color-default: var(--jds-yellow-600);
  --jds-warning-color-emphasis: var(--jds-yellow-700);
  --jds-warning-color-fixed-light: var(--jds-yellow-300);
  --jds-warning-color-fixed-dark: var(--jds-yellow-600);
  --jds-warning-border-color-default: var(--jds-yellow-600);
  --jds-warning-border-color-emphasis: var(--jds-yellow-700);
  --jds-warning-border-color-muted: var(--jds-yellow-200);

  /* ================= Neutral — grey (business/informational states) ================= */
  --jds-neutral-bg-default: var(--jds-gray-700);
  --jds-neutral-bg-muted: var(--jds-gray-100);
  --jds-neutral-surface-default: var(--jds-gray-700);
  --jds-neutral-surface-emphasis: var(--jds-gray-800);
  --jds-neutral-surface-muted: var(--jds-gray-100);
  --jds-neutral-surface-translucent: #0E0E0E26;
  --jds-neutral-color-default: var(--jds-gray-600);
  --jds-neutral-color-emphasis: var(--jds-gray-700);
  --jds-neutral-color-fixed-light: var(--jds-gray-400);
  --jds-neutral-color-fixed-dark: var(--jds-gray-600);
  --jds-neutral-border-color-default: var(--jds-gray-600);
  --jds-neutral-border-color-emphasis: var(--jds-gray-700);
  --jds-neutral-border-color-muted: var(--jds-gray-200);

  /* ================= Purple / Cyan — variety accents (no semantic meaning) ================= */
  --jds-purple-bg-default: var(--jds-purple-700);
  --jds-purple-bg-muted: var(--jds-purple-100);
  --jds-purple-surface-default: var(--jds-purple-600);
  --jds-purple-surface-emphasis: var(--jds-purple-700);
  --jds-purple-surface-muted: var(--jds-purple-100);
  --jds-purple-color-default: var(--jds-purple-600);
  --jds-purple-color-emphasis: var(--jds-purple-700);
  --jds-purple-color-fixed-light: var(--jds-purple-400);
  --jds-purple-color-fixed-dark: var(--jds-purple-600);
  --jds-purple-border-color-default: var(--jds-purple-500);
  --jds-purple-border-color-emphasis: var(--jds-purple-700);
  --jds-purple-border-color-muted: var(--jds-purple-200);

  --jds-cyan-bg-default: var(--jds-cyan-700);
  --jds-cyan-bg-muted: var(--jds-cyan-100);
  --jds-cyan-surface-default: var(--jds-cyan-600);
  --jds-cyan-surface-emphasis: var(--jds-cyan-700);
  --jds-cyan-surface-muted: var(--jds-cyan-100);
  --jds-cyan-color-default: var(--jds-cyan-600);
  --jds-cyan-color-emphasis: var(--jds-cyan-700);
  --jds-cyan-color-fixed-light: var(--jds-cyan-400);
  --jds-cyan-color-fixed-dark: var(--jds-cyan-600);
  --jds-cyan-border-color-default: var(--jds-cyan-500);
  --jds-cyan-border-color-emphasis: var(--jds-cyan-700);
  --jds-cyan-border-color-muted: var(--jds-cyan-200);

  /* ================= Typography colour roles ================= */
  --jds-display-color-default: var(--jds-gray-1000);
  --jds-display-color-subtle: var(--jds-gray-800);
  --jds-heading-color-default: var(--jds-gray-900);
  --jds-heading-color-subtle: var(--jds-gray-800);
  --jds-body-color-default: var(--jds-gray-1000);
  --jds-body-color-subtle: var(--jds-gray-700);
  --jds-label-color-default: var(--jds-gray-900);
  --jds-label-color-subtle: var(--jds-gray-700);
  --jds-link-color-default: var(--jds-blue-600);
  --jds-link-color-emphasis: var(--jds-blue-700);
  --jds-focus-outline: var(--jds-blue-500);

  /* ================= Form control roles ================= */
  --jds-form-surface-default: var(--jds-gray-0);
  --jds-form-surface-raised: var(--jds-gray-100);
  --jds-form-surface-emphasis: var(--jds-gray-700);
  --jds-form-surface-subtle: var(--jds-gray-400);
  --jds-form-surface-muted: var(--jds-gray-200);
  --jds-form-surface-inverse: var(--jds-gray-900);
  --jds-form-surface-fixed-light: var(--jds-gray-0);
  --jds-form-surface-fixed-dark: var(--jds-gray-900);
  --jds-form-color-default: var(--jds-gray-900);
  --jds-form-color-subtle: var(--jds-gray-700);
  --jds-form-color-muted: var(--jds-gray-300);
  --jds-form-color-inverse: var(--jds-gray-100);
  --jds-form-color-fixed-light: var(--jds-gray-0);
  --jds-form-color-fixed-dark: var(--jds-gray-1100);
  --jds-form-primary-surface-default: var(--jds-primary-600);   /* selected control (radio/checkbox) */
  --jds-form-primary-surface-emphasis: var(--jds-primary-700);
  --jds-form-primary-color-default: var(--jds-primary-600);
  --jds-form-success-surface-default: var(--jds-green-600);
  --jds-form-success-color-default: var(--jds-green-600);
  --jds-form-success-border-color-default: var(--jds-green-500);
  --jds-form-danger-surface-default: var(--jds-red-600);
  --jds-form-danger-color-default: var(--jds-red-600);
  --jds-form-danger-border-color-default: var(--jds-red-500);

  /* Input / text-area / select roles (JDS Design System Input frame 4825:38,
   * added 2026-08-04 for Phase 2 Input migration). Border 1px default,
   * 2px emphasis on focus/error via --jds-form-border-width-emphasis. */
  --jds-form-input-bg-default: var(--jds-gray-0);
  --jds-form-input-bg-disabled: var(--jds-gray-100);
  --jds-form-input-border-color-default: var(--jds-gray-500);
  --jds-form-input-border-color-hover: var(--jds-gray-700);
  --jds-form-input-border-color-focus: var(--jds-blue-500);
  --jds-form-input-border-color-error: var(--jds-red-500);
  --jds-form-input-border-color-disabled: var(--jds-gray-300);
  --jds-form-input-fg-default: var(--jds-gray-900);
  --jds-form-input-fg-placeholder: var(--jds-gray-500);
  --jds-form-input-fg-disabled: var(--jds-gray-500);
  --jds-form-label-fg-default: var(--jds-gray-900);
  --jds-form-help-fg-default: var(--jds-gray-700);
  --jds-form-error-fg-default: var(--jds-red-600);
  --jds-form-input-affix-bg: var(--jds-gray-100);
  --jds-form-input-affix-fg: var(--jds-gray-700);
  --jds-form-input-affix-border: var(--jds-gray-300);

  /* ================= Button roles (JDS Design System, added 2026-08-03 for Phase 1) =========
   * Three families x four flavours. Each flavour gets: fg (label colour),
   * bg (default surface), hover (hover surface). Outlined and ghost
   * families reuse the fg for the border where applicable. Focus ring is
   * shared (--jds-focus-outline) and rendered as an inset box-shadow of
   * width --jds-btn-focus-width in the component. Disabled state is a
   * uniform 40% opacity via --jds-opacity-40; no per-flavour override. */

  /* Primary — solid-fill family */
  --jds-btn-primary-brand-fg: var(--jds-gray-100);
  --jds-btn-primary-brand-bg: var(--jds-primary-600);
  --jds-btn-primary-brand-hover: var(--jds-primary-700);
  --jds-btn-primary-danger-fg: var(--jds-gray-100);
  --jds-btn-primary-danger-bg: var(--jds-red-600);
  --jds-btn-primary-danger-hover: var(--jds-red-700);
  --jds-btn-primary-fixed-light-fg: var(--jds-gray-1000);
  --jds-btn-primary-fixed-light-bg: var(--jds-gray-0);
  --jds-btn-primary-fixed-light-hover: var(--jds-bg-translucent);
  --jds-btn-primary-neutral-fg: var(--jds-gray-100);
  --jds-btn-primary-neutral-bg: var(--jds-gray-900);
  --jds-btn-primary-neutral-hover: var(--jds-bg-translucent-inverse);

  /* Outlined — 1px border, no fill */
  --jds-btn-outlined-brand-fg: var(--jds-primary-600);
  --jds-btn-outlined-brand-border: var(--jds-primary-600);
  --jds-btn-outlined-brand-hover: var(--jds-bg-translucent);
  --jds-btn-outlined-danger-fg: var(--jds-red-600);
  --jds-btn-outlined-danger-border: var(--jds-red-600);
  --jds-btn-outlined-danger-hover: var(--jds-red-100);
  --jds-btn-outlined-fixed-light-fg: var(--jds-gray-100);
  --jds-btn-outlined-fixed-light-border: var(--jds-gray-0);
  --jds-btn-outlined-fixed-light-hover: var(--jds-bg-translucent-inverse);
  --jds-btn-outlined-neutral-fg: var(--jds-gray-1000);
  --jds-btn-outlined-neutral-border: var(--jds-gray-800);
  --jds-btn-outlined-neutral-hover: var(--jds-bg-translucent-subtle);

  /* Ghost — no border, no fill */
  --jds-btn-ghost-brand-fg: var(--jds-primary-600);
  --jds-btn-ghost-brand-hover: var(--jds-bg-translucent);
  --jds-btn-ghost-danger-fg: var(--jds-red-600);
  --jds-btn-ghost-danger-hover: var(--jds-red-100);
  --jds-btn-ghost-fixed-light-fg: var(--jds-gray-100);
  --jds-btn-ghost-fixed-light-hover: var(--jds-bg-translucent-inverse);
  --jds-btn-ghost-neutral-fg: var(--jds-gray-1000);
  --jds-btn-ghost-neutral-hover: var(--jds-bg-translucent-subtle);

  /* ================= Alert roles (JDS Design System component_set 17388:15960,
   * added 2026-08-04 for Phase 1) =========================================
   * Five variants (info, success, danger, warning, neutral) x three types.
   *   default  — filled colour surface, near-white text, no border.
   *   outlined — SOFT-TINT surface (100-step wash), semantic-colour icon
   *              + heading, dark body text. Named for the JDS Figma spec —
   *              despite the name, there is no visible outline stroke.
   *   subtle   — inline note: no surface, no border, no container padding.
   *              Renders as icon + heading + description on the page bg.
   *              The component drops padding/border/bg entirely for this type. */

  /* --- Info (blue) --- */
  --jds-alert-info-default-bg: var(--jds-blue-600);
  --jds-alert-info-default-fg: var(--jds-gray-100);
  --jds-alert-info-default-border: transparent;
  --jds-alert-info-outlined-bg: var(--jds-blue-100);
  --jds-alert-info-outlined-fg: var(--jds-gray-1000);
  --jds-alert-info-outlined-icon: var(--jds-blue-600);
  --jds-alert-info-outlined-border: transparent;
  --jds-alert-info-subtle-bg: transparent;
  --jds-alert-info-subtle-fg: var(--jds-gray-1000);
  --jds-alert-info-subtle-icon: var(--jds-blue-600);
  --jds-alert-info-subtle-border: transparent;

  /* --- Success (green) --- */
  --jds-alert-success-default-bg: var(--jds-green-600);
  --jds-alert-success-default-fg: var(--jds-gray-100);
  --jds-alert-success-default-border: transparent;
  --jds-alert-success-outlined-bg: var(--jds-green-100);
  --jds-alert-success-outlined-fg: var(--jds-gray-1000);
  --jds-alert-success-outlined-icon: var(--jds-green-600);
  --jds-alert-success-outlined-border: transparent;
  --jds-alert-success-subtle-bg: transparent;
  --jds-alert-success-subtle-fg: var(--jds-gray-1000);
  --jds-alert-success-subtle-icon: var(--jds-green-600);
  --jds-alert-success-subtle-border: transparent;

  /* --- Danger (red) --- */
  --jds-alert-danger-default-bg: var(--jds-red-600);
  --jds-alert-danger-default-fg: var(--jds-gray-100);
  --jds-alert-danger-default-border: transparent;
  --jds-alert-danger-outlined-bg: var(--jds-red-100);
  --jds-alert-danger-outlined-fg: var(--jds-gray-1000);
  --jds-alert-danger-outlined-icon: var(--jds-red-600);
  --jds-alert-danger-outlined-border: transparent;
  --jds-alert-danger-subtle-bg: transparent;
  --jds-alert-danger-subtle-fg: var(--jds-gray-1000);
  --jds-alert-danger-subtle-icon: var(--jds-red-600);
  --jds-alert-danger-subtle-border: transparent;

  /* --- Warning (yellow) — JDS pins warning bg to yellow-200 (bright), NOT
   *     yellow-600 (olive). Text on the bright yellow must be dark
   *     (grey-1000), because "white on olive" and "white on bright yellow"
   *     both fail contrast. Confirmed from Figma component_set 17388:15979:
   *     bg-emphasis = #fcde63 (= --jds-yellow-200), color = --jds-color-fixed-dark. */
  --jds-alert-warning-default-bg: var(--jds-yellow-200);
  --jds-alert-warning-default-fg: var(--jds-gray-1000);
  --jds-alert-warning-default-border: transparent;
  --jds-alert-warning-outlined-bg: var(--jds-yellow-100);
  --jds-alert-warning-outlined-fg: var(--jds-gray-1000);
  --jds-alert-warning-outlined-icon: var(--jds-yellow-700);
  --jds-alert-warning-outlined-border: transparent;
  --jds-alert-warning-subtle-bg: transparent;
  --jds-alert-warning-subtle-fg: var(--jds-gray-1000);
  --jds-alert-warning-subtle-icon: var(--jds-yellow-700);
  --jds-alert-warning-subtle-border: transparent;

  /* --- Neutral (grey) --- */
  --jds-alert-neutral-default-bg: var(--jds-gray-900);
  --jds-alert-neutral-default-fg: var(--jds-gray-100);
  --jds-alert-neutral-default-border: transparent;
  --jds-alert-neutral-outlined-bg: var(--jds-gray-100);
  --jds-alert-neutral-outlined-fg: var(--jds-gray-1000);
  --jds-alert-neutral-outlined-icon: var(--jds-gray-900);
  --jds-alert-neutral-outlined-border: transparent;
  --jds-alert-neutral-subtle-bg: transparent;
  --jds-alert-neutral-subtle-fg: var(--jds-gray-1000);
  --jds-alert-neutral-subtle-icon: var(--jds-gray-900);
  --jds-alert-neutral-subtle-border: transparent;

  /* ================= Secondary — navy (RESERVED / hidden; un-comment when needed) ==========
  --jds-secondary-bg-default: var(--jds-secondary-700);
  --jds-secondary-bg-muted: var(--jds-secondary-100);
  --jds-secondary-surface-default: var(--jds-secondary-700);
  --jds-secondary-surface-emphasis: var(--jds-secondary-700);
  --jds-secondary-surface-muted: var(--jds-secondary-100);
  --jds-secondary-color-default: var(--jds-secondary-600);
  --jds-secondary-color-emphasis: var(--jds-secondary-700);
  --jds-secondary-color-fixed-light: var(--jds-secondary-400);
  --jds-secondary-color-fixed-dark: var(--jds-secondary-600);
  --jds-secondary-border-color-default: var(--jds-secondary-600);
  --jds-secondary-border-color-emphasis: var(--jds-secondary-700);
  --jds-secondary-border-color-muted: var(--jds-secondary-200);
  ======================================================================================= */
}