:root {
  /* ============================================================
   * IFS Granite tokens — the canonical set (colors + radius). Values
   * copied from the design handoff's colors_and_type.css (light theme).
   * Everything below this block is the APP's own token names, kept as
   * ALIASES onto these so every existing consumer (dashboard.css,
   * fleet.css, onboarding.css, owly.css, inline JS styles) keeps
   * working unchanged while resolving to the new values. New code
   * (Board/Workforce redesign) should reference the Granite names
   * directly; older code keeps its existing var(--color-bg-page) etc.
   * ============================================================ */
  --ifs-purple:#8427e2; --ifs-midnight-purple:#15012b;

  --color-background:#ffffff; --color-background-page:#f4f2f4;
  --color-background-variant:#f9f9f9; --color-background-hover:#e8e8e8;
  --color-background-active:#0365d8; --color-background-active-hover:#005296;
  --color-background-active-pressed:#0054b6;

  --color-text:#000000; --color-text-weak:#3e484d; --color-text-hint:#636769;
  --color-text-link:#0173d1;

  --color-border-soft:#e8e8e8; --color-border-medium:#d9d9d9; --color-border-hard:#8c8c8c;

  --color-background-ok:#e6f7cb;      --color-foreground-ok:#36775c;
  --color-background-warning:#fdfac9; --color-foreground-warning:#481b0f;
  --color-background-failure:#fdcedf; --color-foreground-failure:#9d1c40;
  --color-background-info:#dcf7fb;    --color-foreground-info:#1a376d;
  --color-background-ai:#ebe7fb;      --color-foreground-ai:#360065;
  /* Slice 82B — Owly answer blocks (design_handoff_owly_answer_blocks §6): the amber
     caveat/severity family the handoff specifies (distinct from the warning PILL pair
     above), the subtle track fill, link tints, and the chart tooltip/pointer. */
  --color-caution:#8a4b00;            --color-caution-soft:#fff1d6;
  --color-caution-box:#fff8ea;        --color-caution-ink:#5c3a0a;
  --color-severity-low:#e0a030;       --color-severity-high:#c4314b;
  --color-subtle-fill:#f0f1f2;
  /* Crew trend comparison: approved "Before" bar from crew_performance_01.png.
     "Now" continues to use --color-text-link. */
  --color-trend-before:#b4d6f2;
  /* comparison_columns block (design_handoff_comparison_columns): ratio chip fill; its
     ink is --worker-detail-chip-ink, the columns --color-text-link / --color-trend-before */
  --color-compare-ratio-bg:#e6f1fb;
  --color-link-soft:#eef6fd;          --color-link-border:#c5dcf1;
  --color-chart-tooltip:#202022;      --color-chart-pointer:#c9cdd0;
  /* SIGNAL — solid, saturated (icons/dots/bar-fills), distinct from the soft
     background/foreground PILL pairs above. Added in Phase 2 (Board redesign
     needs --color-signal-failure for the outlier row bar-fill); the rest of
     the trio is added alongside it so it isn't missing piecemeal later. */
  --color-signal-default:#1a1b1d; --color-signal-neutral:#8c8c8c;
  --color-signal-info:#0365d8; --color-signal-ok:#27b663;
  --color-signal-warning:#ffaa35; --color-signal-failure:#ec5246;
  --color-signal-ai:#360065;

  --gradient-ai:linear-gradient(135deg, #8427e2 0%, #6d9ced 100%);
  /* Phase 2 (Board redesign) — the "Today's priority" banner's subtle purple-tinted
     wash, copied verbatim from the handoff's mock markup. */
  --gradient-priority-banner:linear-gradient(180deg, #faf8fe 0%, #fff 100%);

  --radius-s:4px; --radius-m:8px; --radius-l:16px;

  --dataviz-cyan-6:#35b1ad; --dataviz-green-6:#74c473; --dataviz-purple-6:#a45baa;
  --dataviz-red-6:#ed6372;

  --shadow-base:0 0 1px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.08);

  /* ============================================================
   * App token names — ALIASED onto the Granite set above. A few
   * (teal --color-primary, the violet --color-agent/--color-unverified
   * pair) have no direct Granite equivalent; --color-primary is
   * repointed to the Granite action-blue triad (the redesign's fixed
   * accent, see design_handoff_operations_board/README.md's "Accent
   * tweak" — hardcoded to product blue, no toggle), --color-agent to
   * the IFS brand purple (AI-attributed content), and --color-unverified
   * is left as its own literal violet (a 4th trust state Granite has
   * no token for).
   * ============================================================ */
  /* surfaces */
  --color-bg-page:var(--color-background-page); --color-bg-surface:var(--color-background);
  --color-bg-surface-muted:var(--color-background-variant); --color-bg-elevated:var(--color-background);
  /* text */
  --color-text-primary:var(--color-text); --color-text-secondary:var(--color-text-weak);
  --color-text-tertiary:var(--color-text-hint); --color-text-inverse:#FFFFFF;
  /* borders */
  --color-border-subtle:var(--color-border-soft); --color-border-strong:var(--color-border-medium);
  /* brand — product blue is the one dominant accent (hardcoded, no accent toggle);
     agent-purple is reserved for genuinely AI-attributed content (co-pilot dock,
     LLM-involved oplog entries, insight/anomaly/forecast/risk attribution badges) —
     see dashboard.css's per-selector usage. */
  --color-primary:var(--color-background-active); --color-primary-soft:var(--color-background-info);
  --color-primary-strong:var(--color-background-active-pressed);
  --color-agent:var(--ifs-purple); --color-agent-soft:var(--color-background-ai);
  /* states — deliberately left muted (not the brighter set from the reference palette):
     several places (entity-anomaly, insight cards) are built around "unusual != bad",
     and a louder status palette would fight that framing. */
  --color-ready:var(--color-foreground-ok); --color-ready-soft:var(--color-background-ok);
  --color-degraded:var(--color-foreground-warning); --color-degraded-soft:var(--color-background-warning);
  --color-dark:var(--color-border-hard); --color-dark-soft:var(--color-background-variant);
  --color-danger:var(--color-foreground-failure); --color-danger-soft:var(--color-background-failure);
  --color-info:var(--color-foreground-info); --color-info-soft:var(--color-background-info);
  /* Slice 22: a DISTINCT 4th trust state for raw-SQL custom metrics (never ready/degraded) */
  --color-unverified:#7A5AF8; --color-unverified-soft:#F1ECFF;
  /* typography — system-ui declared ON PURPOSE: "Inter" was never actually shipped
     (no @font-face, no font file anywhere in app/static), so every user already got
     this exact fallback chain silently. This just makes it true instead of aspirational. */
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,BlinkMacSystemFont,sans-serif;
  --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  /* scale */
  --text-xs:11px; --text-sm:12px; --text-md:14px; --text-lg:16px; --text-xl:20px; --text-kpi:30px;
  /* spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  /* shape */
  --radius-sm:var(--radius-s); --radius-md:var(--radius-m); --radius-card:var(--radius-m);
  --radius-lg:var(--radius-l); --radius-pill:999px;
  /* elevation — a real two-layer lift instead of a near-invisible 1px/5%-opacity line */
  --shadow-card:0 1px 2px rgba(16,24,40,0.06), 0 4px 10px rgba(16,24,40,0.10);
  --shadow-dock:0 8px 24px rgba(15,23,42,0.12);
  --shadow-card-hover:0 2px 4px rgba(16,24,40,0.08), 0 8px 16px rgba(16,24,40,0.12);
  --shadow-modal:0 16px 32px rgba(15,23,42,0.10), 0 24px 80px rgba(15,23,42,0.20);
  /* spacing (15a) */
  --space-7:28px; --space-section:32px;   /* Board restyle: was 28px */
  /* layout */
  --card-padding:20px; --card-gap:16px; --dock-width:300px;
  --oplog-width:360px;   /* Slice 49: the persistent op-log panel, opposite the co-pilot */

  /* ============================================================
   * Board restyle tokens — exact names from the restyle spec. Most
   * alias onto EXISTING Granite/app tokens above (same values, one
   * source of truth); --data-blue/--data-track/--rule are genuinely
   * new (the single categorical data colour + its unfilled track,
   * and in-card row dividers). --data-blue replaces the prior
   * per-metric dataviz palette (cyan/green/purple/orange) — one
   * data colour everywhere; green/red stay reserved for deltas only.
   * ============================================================ */
  --card-bg:var(--color-background); --card-border:var(--color-border-soft);
  --card-radius:var(--radius-m); --card-pad:var(--card-padding); --grid-gap:var(--card-gap);
  --section-gap:var(--space-section); --page-bg:var(--color-background-page);
  --data-blue:#2b62b2; --data-track:#edf1f7;
  --ink:var(--color-text); --ink-2:var(--color-text-weak); --ink-3:var(--color-text-hint);
  --rule:#f2f2f2; --pos:var(--color-foreground-ok); --neg:var(--color-foreground-failure);

  /* ---- Workforce (Fleet) page accents — "modern industrial / control room"
   * theme, applied ONLY by fleet.css (scoped to body.view-fleet / #fleet), never
   * referenced from dashboard.css. A dedicated set because this page's hierarchy
   * differs from the Board's: a finding needing attention must outrank a plain
   * "Active" status, and reusing --color-ready/--color-degraded directly would
   * also recolor unrelated Board/data-quality badges that share those tokens. */
  --wf-bg-page:#F1F2F4;       /* cooler, less creamy than --color-bg-page */
  --wf-card-border:#D9DAD6;   /* slightly stronger than --color-border-subtle */
  --wf-active:#087A5A;       --wf-active-soft:#E3F4EE;      /* compact/secondary */
  --wf-attention:#A75B00;    --wf-attention-soft:#FFF0D8;   /* higher priority than active */
  --worker-detail-icon-bg:#e1ebeb;
  --worker-detail-hero-bg:#f6f7f8;
  --worker-detail-chip-ink:#0b4f8a;

  /* Mobile companion — presentation-only aliases and surfaces. Keep literal
     color values centralized here so the repository color guard remains one-source. */
  --mobile-row-attention:#fffdf2;
  --mobile-disabled:#b0b0b0;
  --mobile-overlay:rgba(21,1,43,0.22);
  /* Crew tab roll call (design handoff 2026-10): dashed rings, off-state fill, state pill */
  --mobile-rc-ring-gated:#9aa0a3;
  --mobile-rc-ring-soon:#c4c1c6;
  --mobile-rc-off-bg:#eeeeee;
  --mobile-rc-pill-bg:#f0eef1;
  --mobile-rc-primary-hover:#6a1fb8;
  /* Mobile floating tab dock (frosted) */
  --mobile-glass-bg:rgba(255,255,255,0.72);
  --mobile-glass-border:rgba(255,255,255,0.9);
  --mobile-dock-shadow:0 10px 28px rgba(60,30,120,0.18);
  --mobile-dock-tab-shadow:0 2px 8px rgba(60,30,120,0.12);
  /* Login page hero + panel (auth.css); accent matches the Owly logo */
  --auth-hero-bg:radial-gradient(120% 80% at 100% 100%, rgba(46,180,240,0.28) 0%, rgba(46,180,240,0) 55%),
    linear-gradient(155deg, #15012b 0%, #2a0b5c 48%, #0b3a75 100%);
  --auth-hero-glow:rgba(132,39,226,0.45);
  --auth-hero-accent:#2eb4f0; --auth-hero-accent-soft:rgba(46,180,240,0.18);
  --auth-hero-ink-weak:rgba(255,255,255,0.78);
  --auth-hero-dot:rgba(255,255,255,0.07);
  --auth-logo-shadow:0 14px 28px rgba(46,180,240,0.35);
  --auth-panel-bg:radial-gradient(60% 50% at 100% 0%, #ebe7fb 0%, rgba(235,231,251,0) 70%), #f4f2f4;
}