/* @gl-tokens-version 1.0.0 — semver: major=breaking token/component/shell · minor=additive · patch=no consumer change.
   CANONICAL COPY — edit ONLY here; vendored copies are refreshed by bin/sync_design_tokens.py
   and CI (design-tokens job) fails on any drift. Canon §2/§5; spec: the UI unification review. */
/* Garnet Ledger — design tokens · Pattern Library (Operating Model Layer 4)
   The single source of truth for color, space, type, motion. Framework-agnostic CSS custom
   properties: consumed by the static-HTML modules today and the React component library next.
   Every token cites the Canon rule it implements. This file replaces all per-module palettes. */

:root {
  /* Brand — Canon §2.1: garnet is IDENTITY ONLY (logo, sidebar, chrome). Never data/status/action. */
  --gl-brand: #7c2d3e;
  --gl-brand-accent: #a31b41;
  --gl-brand-on: #ffffff;

  /* Semantic color — Canon §2.1, FR-009 (light mode). Each: base / soft fill / on-fill text. */
  --gl-risk: #dc2626;     --gl-risk-bg: #fcebeb;     --gl-risk-on: #791f1f;
  --gl-healthy: #16a34a;  --gl-healthy-bg: #eaf3de;  --gl-healthy-on: #27500a;
  --gl-caution: #d97706;  --gl-caution-bg: #faeeda;  --gl-caution-on: #633806;
  --gl-info: #2563eb;     --gl-info-bg: #e6f1fb;     --gl-info-on: #0c447c;   /* also the default action */
  --gl-ai: #7c5cf0;       --gl-ai-bg: #eeedfe;       --gl-ai-on: #3c3489;     /* Operations Advisor */
  --gl-structure: #64748b;

  /* Surfaces & text — Canon §2 */
  --gl-surface: #ffffff;  --gl-surface-2: #f6f7f9;  --gl-page: #f1f2f4;
  --gl-text: #1c1e21;     --gl-text-muted: #5f6672; --gl-text-faint: #8b909b;
  --gl-border: rgba(20,22,28,0.12); --gl-border-2: rgba(20,22,28,0.22);

  /* Role / type layer — Canon §2.3: SEPARATE from semantic color; never collides with status.
     Neutral categorical tints for rank/type chips only (patrol/sergeant/K9, etc.). */
  --gl-role-bg: #eef0f3; --gl-role-on: #475063;

  /* Spacing — Canon §1 rhythm */
  --gl-space-1: 4px; --gl-space-2: 8px; --gl-space-3: 12px; --gl-space-4: 16px;
  --gl-space-5: 20px; --gl-space-6: 24px; --gl-space-8: 32px;

  /* Radius */
  --gl-radius-sm: 6px; --gl-radius-md: 8px; --gl-radius-lg: 12px; --gl-radius-pill: 999px;

  /* Type — Canon §8: two weights only (400 / 500) */
  --gl-font: "Inter", system-ui, -apple-system, sans-serif;
  --gl-mono: "JetBrains Mono", ui-monospace, monospace;
  --gl-w-regular: 400; --gl-w-medium: 500;
  --gl-fs-xs: 12px; --gl-fs-sm: 13px; --gl-fs-base: 14px; --gl-fs-md: 15px;
  --gl-fs-lg: 18px; --gl-fs-xl: 22px; --gl-fs-2xl: 28px;

  /* Motion — Canon §6 / FR-013 */
  --gl-dur-fast: 0.1s; --gl-dur-base: 0.15s; --gl-dur-slow: 0.35s;
  --gl-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Dark mode — Canon §2.4: every token shifts to preserve >= 4.5:1.
   Two valid contexts: automatic (prefers-color-scheme) and explicit ([data-theme="dark"]). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gl-brand: #c34a5e; --gl-brand-accent: #d8607a;
    --gl-risk: #e05c5c;    --gl-risk-bg: #2a1414;    --gl-risk-on: #f7c1c1;
    --gl-healthy: #4caf7d; --gl-healthy-bg: #14241a; --gl-healthy-on: #c0dd97;
    --gl-caution: #e0a830; --gl-caution-bg: #2a2110; --gl-caution-on: #fac775;
    --gl-info: #4d9ef5;    --gl-info-bg: #102236;    --gl-info-on: #b5d4f4;
    --gl-ai: #a78bfa;      --gl-ai-bg: #1d1830;      --gl-ai-on: #cecbf6;
    --gl-structure: #8b93a3;
    --gl-surface: #1c1c1e; --gl-surface-2: #242427; --gl-page: #161618;
    --gl-text: #e8e8ea; --gl-text-muted: #a0a4ad; --gl-text-faint: #71757e;
    --gl-border: rgba(255,255,255,0.14); --gl-border-2: rgba(255,255,255,0.24);
    --gl-role-bg: #2a2d33; --gl-role-on: #aab1bf;
  }
}
:root[data-theme="dark"] {
  --gl-brand: #c34a5e; --gl-brand-accent: #d8607a;
  --gl-risk: #e05c5c;    --gl-risk-bg: #2a1414;    --gl-risk-on: #f7c1c1;
  --gl-healthy: #4caf7d; --gl-healthy-bg: #14241a; --gl-healthy-on: #c0dd97;
  --gl-caution: #e0a830; --gl-caution-bg: #2a2110; --gl-caution-on: #fac775;
  --gl-info: #4d9ef5;    --gl-info-bg: #102236;    --gl-info-on: #b5d4f4;
  --gl-ai: #a78bfa;      --gl-ai-bg: #1d1830;      --gl-ai-on: #cecbf6;
  --gl-structure: #8b93a3;
  --gl-surface: #1c1c1e; --gl-surface-2: #242427; --gl-page: #161618;
  --gl-text: #e8e8ea; --gl-text-muted: #a0a4ad; --gl-text-faint: #71757e;
  --gl-border: rgba(255,255,255,0.14); --gl-border-2: rgba(255,255,255,0.24);
  --gl-role-bg: #2a2d33; --gl-role-on: #aab1bf;
}

/* The module skeleton — Canon §5.2: every screen wears these in order (Information Hierarchy). */
.gl-page-header {}   /* Mission & status */
.gl-advisor {}       /* Operations Advisor — first; GL-COMP-004/005 */
.gl-pipeline {}      /* Domain work surface */
.gl-action-layer {}  /* Today's focus — exactly one primary action (FR-011) */
.gl-reference {}     /* Entities */
.gl-vacancies {}     /* Open items */

/* Focus — FR-008 (WCAG 2.4.11): visible focus on every interactive element, no exceptions. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gl-info); outline-offset: 2px; border-radius: var(--gl-radius-sm);
}

/* Reduced motion — FR-013. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Deadline color — Canon §2.2: encodes time-to-statute, not decoration. Pair with a non-color cue (FR-020). */
.gl-deadline--urgent { color: var(--gl-risk); }    /* < 2 days */
.gl-deadline--soon   { color: var(--gl-caution); } /* < 5 days */
.gl-deadline--clear  { color: var(--gl-healthy); }