/* NTIS semantic tokens — DARK. The default and primary design language.
   Declared on :root (an unthemed page is dark) and on [data-ntis-theme="dark"]
   (a dark island inside a light page: hero, sidebar, toast, tooltip).
   tokens/theme-light.css declares the IDENTICAL token list for
   [data-ntis-theme="light"]. Components read only these names — no component
   stylesheet contains a theme selector, so both themes stay in lock-step.
   Dark is designed, not inverted: elevation comes from surface lightness and
   hairlines (shadows only for floating layers), inks are one step lighter, and
   hover lightens where light-theme hover darkens. */
:root,[data-ntis-theme="dark"]{
  color-scheme: dark;

  /* Surfaces — lightness is the elevation: sunken < page < card < muted < raised */
  --surface-sunken: var(--luxe-blue-shades-80);
  --surface-page: var(--luxe-blue-shades-75);
  --surface-card: var(--luxe-blue-shades-65);
  --surface-card-hover: var(--luxe-blue-shades-60);
  --surface-muted: var(--luxe-blue-shades-60);
  --surface-raised: var(--luxe-blue-shades-55);
  --surface-chrome: var(--luxe-blue-shades-80);
  --surface-brand: var(--sky-tints-0);
  --surface-overlay: rgba(6, 9, 13, 0.72);
  --surface-glass: rgba(19, 24, 33, 0.78);
  /* Section bands — the colour change IS the divider between full-bleed sections */
  --surface-band: var(--luxe-blue-shades-75);
  --surface-band-alt: var(--luxe-blue-shades-70);

  /* Fills — translucent, so one value works on every surface */
  --fill-subtle: rgba(255, 255, 255, 0.05);
  --fill-hover: rgba(255, 255, 255, 0.08);
  --fill-pressed: rgba(255, 255, 255, 0.12);
  --fill-selected: rgba(30, 150, 211, 0.18);
  --fill-disabled: rgba(255, 255, 255, 0.06);
  --fill-on-solid-hover: rgba(255, 255, 255, 0.14);

  /* Text — every role clears 4.5:1 on card except disabled */
  --text-strong: var(--white);
  --text-body: var(--luxe-blue-tints-75);
  --text-muted: var(--luxe-blue-tints-50);
  --text-subtle: var(--luxe-blue-tints-25);
  --text-disabled: var(--luxe-blue-tints-0);
  --text-on-brand: var(--white);
  --text-on-action: var(--white);
  --text-link: var(--sky-tints-25);
  --text-link-hover: var(--sky-tints-50);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.09);
  --border-default: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.28);
  --border-focus: var(--sky-tints-25);
  --border-selected: var(--sky-tints-25);

  /* Controls — inputs, selects, checkboxes, radios, switches */
  --control-bg: rgba(255, 255, 255, 0.04);
  --control-bg-disabled: rgba(255, 255, 255, 0.02);
  --control-border: rgba(255, 255, 255, 0.20);
  --control-border-hover: rgba(255, 255, 255, 0.32);
  --control-ink: var(--white);
  --control-placeholder: var(--luxe-blue-tints-25);
  --control-checked: var(--sky-tints-0);
  --control-checked-hover: var(--sky-tints-12);
  --control-check-ink: var(--white);
  --switch-track: rgba(255, 255, 255, 0.18);
  --switch-knob: var(--white);
  --control-border-invalid: var(--wine-tints-50);
  --control-border-warning: var(--warning-tints-0);
  --control-border-success: var(--green-tints-25);

  /* Brand roles — primary sky (action), secondary nili (structure), tertiary wine (sparing) */
  --brand-primary: var(--sky-tints-0);
  --brand-primary-hover: var(--sky-tints-12);
  --brand-primary-active: var(--sky-shades-25);
  --brand-primary-soft: rgba(30, 150, 211, 0.16);
  --brand-primary-ink: var(--sky-tints-25);
  --brand-secondary: var(--luxe-blue-tints-0);
  --brand-secondary-hover: var(--luxe-blue-tints-12);
  --brand-secondary-active: var(--luxe-blue-shades-25);
  --brand-secondary-soft: rgba(79, 99, 133, 0.32);
  --brand-secondary-ink: var(--luxe-blue-tints-75);
  --brand-tertiary: var(--wine-tints-12);
  --brand-tertiary-hover: var(--wine-tints-25);
  --brand-tertiary-active: var(--wine-tints-0);
  --brand-tertiary-soft: rgba(129, 24, 41, 0.32);
  --brand-tertiary-ink: var(--wine-tints-50);
  --brand-neutral: var(--neutral-tints-50);

  /* Status — fg: text & icons · bg: tinted panel · border · solid: dots, edges, fills */
  --status-info-fg: var(--sky-tints-50);
  --status-info-bg: rgba(30, 150, 211, 0.16);
  --status-info-border: rgba(86, 176, 222, 0.36);
  --status-info-solid: var(--sky-tints-25);
  --status-success-fg: var(--green-tints-25);
  --status-success-bg: rgba(138, 168, 41, 0.16);
  --status-success-border: rgba(167, 189, 94, 0.36);
  --status-success-solid: var(--green-tints-0);
  --status-warning-fg: var(--warning-tints-25);
  --status-warning-bg: rgba(211, 150, 30, 0.16);
  --status-warning-border: rgba(222, 176, 86, 0.36);
  --status-warning-solid: var(--warning-tints-0);
  --status-danger-fg: var(--wine-tints-50);
  --status-danger-bg: rgba(160, 81, 94, 0.22);
  --status-danger-border: rgba(192, 139, 148, 0.38);
  --status-danger-solid: var(--wine-tints-25);
  --status-neutral-fg: var(--neutral-tints-75);
  --status-neutral-bg: rgba(255, 255, 255, 0.07);
  --status-neutral-border: rgba(255, 255, 255, 0.16);
  --status-neutral-solid: var(--neutral-tints-50);

  /* Severity — critical → info, for incidents and advisories */
  --sev-critical: var(--wine-tints-25);
  --sev-high: var(--warning-tints-0);
  --sev-medium: var(--warning-tints-50);
  --sev-low: var(--sky-tints-25);
  --sev-info: var(--neutral-tints-50);

  /* Elevation — cards carry none; only floating layers cast shadows */
  --shadow-rgb: 3, 5, 8; /* @kind other */
  --elev-0: 0 0 #0000;
  --elev-1: 0 0 #0000;
  --elev-2: 0 4px 12px rgba(var(--shadow-rgb), 0.40);
  --elev-3: 0 12px 32px rgba(var(--shadow-rgb), 0.50);
  --elev-4: 0 24px 64px rgba(var(--shadow-rgb), 0.60);
  --elev-inset: inset 0 1px 2px rgba(var(--shadow-rgb), 0.50);
  --card-shadow: var(--elev-1);
  --card-shadow-hover: var(--elev-0);
  --focus-ring: 0 0 0 3px rgba(86, 176, 222, 0.45);
  --focus-ring-danger: 0 0 0 3px rgba(192, 139, 148, 0.45);

  /* Grounds & theme-conditional display */
  --gradient-hero: var(--mesh-night); /* @kind color */
  --gradient-hero-mirror: var(--mesh-night-mirror); /* @kind color */
  --show-in-dark: block; /* @kind other */
  --show-in-light: none; /* @kind other */
  --selection-bg: var(--sky-shades-25);
  --selection-ink: var(--white);

  /* Page banners — full-width, white ink */
  --banner-neutral-bg: var(--luxe-blue-shades-55);
  --banner-info-bg: var(--sky-shades-25);
  --banner-critical-bg: var(--wine-shades-25);

  /* Charts — pie order: navy, light navy, sky, light sky, green, light green, nili, light nili, then neutrals */
  --chart-1: var(--sky-shades-50);
  --chart-2: var(--sky-shades-25);
  --chart-3: var(--sky-tints-25);
  --chart-4: var(--sky-tints-75);
  --chart-5: var(--green-tints-25);
  --chart-6: var(--green-tints-75);
  --chart-7: var(--luxe-blue-tints-50);
  --chart-8: var(--luxe-blue-tints-25);
  --chart-9: var(--neutral-tints-50);
  --chart-10: var(--neutral-tints-25);
  --chart-grid: rgba(255, 255, 255, 0.07);
  --chart-axis: var(--luxe-blue-tints-25);
  --chart-track: rgba(255, 255, 255, 0.08);
  --chart-area-opacity: 0.26; /* @kind other */
  --chart-tooltip-bg: var(--luxe-blue-shades-55);
  --chart-tooltip-ink: var(--white);
  --chart-tooltip-muted: var(--luxe-blue-tints-50);
  --chart-tooltip-border: rgba(255, 255, 255, 0.16);
  --chart-tooltip-divider: rgba(255, 255, 255, 0.16);
}