/* dashboard/styles/tokens.css — the design tokens, lifted from design/pdm-advisor-dashboard.html.
 *
 * The mockup scopes these to #app; here they sit on :root so any screen inherits them.
 * Light is the default. Dark applies when the root carries data-theme="dark", and also when
 * the viewer's OS prefers dark and no explicit light choice has been made.
 *
 * COLOUR DISCIPLINE (the reason this file exists as a single source):
 *   --healthy      a signal in agreement with its group
 *   --advisory     a signal drifting from its group — the product's own output
 *   --vesselalarm  the VESSEL's alarm, as received. NEVER used for our advisories; the two
 *                  are different claims and must never share a colour.
 *   --settling     a filter converging — not yet watching, and says so
 *   --stale        the uplink has gone quiet
 * Shape carries the same meaning independently (filled / ring / dashed ring), so state is
 * never colour-only.
 */

:root {
  --bg: #f2f2f5;
  --bg2: #e9e9ec;
  --card: #ffffff;
  --card2: #fbfbfd;
  --sidebar: rgba(249, 249, 251, 0.72);

  --text: #1d1d1f;
  --text2: #6e6e73;
  --text3: #a1a1a6;

  --divider: rgba(0, 0, 0, 0.09);
  --divider2: rgba(0, 0, 0, 0.045);
  --hair: 1px solid rgba(0, 0, 0, 0.06);

  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.12);
  /* Text and marks sitting ON the accent fill. One place to fix contrast if accent moves. */
  --on-accent: #ffffff;
  --scrollbar-thumb: rgba(128, 128, 128, 0.3);
  --healthy: #2e9e5b;
  --healthy-soft: rgba(46, 158, 91, 0.14);
  --advisory: #f5920a;
  --advisory-soft: rgba(245, 146, 10, 0.15);
  --vesselalarm: #e02424;
  --vesselalarm-soft: rgba(224, 36, 36, 0.12);
  --settling: #7c6bf2;
  --settling-soft: rgba(124, 107, 242, 0.14);
  --stale: #9a9aa0;
  --stale-soft: rgba(154, 154, 160, 0.12);

  /* ---- TREND-CHART SERIES PALETTE ----
   * One ordered palette (components/palette.js) that keys a per-sensor colour by group order,
   * paired with a line pattern so a trace is never told apart by colour alone.
   *
   * OWNER VISUAL DECISION (Sept): the PRIMARY trend colour is a WARM ORANGE (index 0, solid).
   * Additional traces are MUTED complementary hues carrying distinct line patterns (dashed,
   * dotted, dash-dot) so no two traces read as an indistinguishable block of orange. The set
   * stays deliberately clear of AMBER (--advisory, reserved for advisory thresholds/events),
   * of grey (reference/baseline lines) and of red (the vessel alarm). The warm-orange primary
   * is REDDER than the yellower advisory amber so the two never blur together. */
  --series-orange: #e8590c;   /* PRIMARY — warm orange, solid (index 0) */
  --series-teal:   #2f7d8a;   /* muted teal-slate, dashed (index 1) */
  --series-violet: #6b5b9a;   /* muted violet, dotted (index 2) */
  --series-steel:  #45688c;   /* muted steel-blue, dash-dot (index 3) */
  --chart-neutral: #8a8a90;   /* baseline / reference lines — neutral, never a state colour */

  /* ---- TREND-CHART EXPLANATORY TEXT / TOOLTIP ----
   * Axis numbers, tick labels, legends and explanatory captions must read at HIGH CONTRAST —
   * near-black on the light theme, appropriately light on dark. --chart-ink is the strong
   * primary for axis numbers and legends; --chart-ink-2 is a slightly softer dark-grey for
   * secondary captions (still high-contrast, never a low-contrast wash). The tooltip sits on a
   * NEUTRAL near-white card, dark text — never a coloured or heavy background. */
  --chart-ink:   #1d1d1f;     /* axis numbers, labels, legends — near-black, high contrast */
  --chart-ink-2: #3a3a3c;     /* secondary explanatory text — dark grey, still high contrast */
  --chart-tip-bg: #fbfbfd;    /* tooltip card — neutral near-white */

  /* ---- ELEVATION ----
   * Two layers per level: a tight contact shadow that anchors the edge, and a wider ambient
   * one that lifts the whole shape. One place to tune.
   *
   * Dark theme is NOT the same shadows darkened. On a dark ground a shadow has almost nothing
   * to darken, so elevation there reads through the surface TINT (--card sits lighter than
   * --bg) with the shadow only deepening the separation. Shadow alone would make every card
   * vanish into the background. */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.07);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.08), 0 14px 34px rgba(0, 0, 0, 0.10);
  /* A chip floats a hair. It is not a button and must not read like one. */
  --shadow-chip: 0 1px 1.5px rgba(0, 0, 0, 0.05);
  --shadow-chip-hover: 0 1px 3px rgba(0, 0, 0, 0.09);
  --shadow-sheet: 0 24px 80px rgba(0, 0, 0, 0.22);
  --shadow: var(--shadow-card);

  /* The globe's whole palette. Two flat tones and nothing else — no gradient, no texture,
     no shading. A stylised sphere cannot be mistaken for a chart. */
  --globe-sea: #cfe0ee;
  --globe-land: #d8d8dc;
  /* Depth cues, deliberately minimal: a lighter sea toward the upper-left so the disc reads
     as a ball, a limb vignette so the edge falls away, and a soft ground shadow. No terrain,
     no lighting model, no texture — the flat-tone ruling otherwise stands. */
  --globe-sea-hi: #e2edf6;
  --globe-limb: #0d2436;
  --globe-shadow: #1b2733;
  /* Names sit quietly under the data — muted enough to read as ground, not as content. */
  --globe-label: rgba(90, 96, 104, 0.72);
  /* The landing is a space view: true black behind the Earth, a thin atmosphere at the limb,
     and a night side that is DIMMED rather than blacked — a ship on the night side must still
     be a ship you can see. */
  --globe-space: #000000;
  --globe-atmos: #7fb4ff;
  --globe-night: rgba(6, 11, 20, 0.72);
  --globe-dusk: rgba(24, 34, 56, 0.42);
  --globe-moon: #d8d4cc;
  --globe-space-label: rgba(190, 205, 225, 0.55);
  --globe-space-name: rgba(238, 244, 252, 0.95);
  /* ---- THE FLEET LANDING'S PALETTE — CONTRACT LITERALS ----
     1-to-1 with the ratified export (fleet-landing-source-2026-08-24.dc.html, 5b3890c). These
     are the design's own hexes with a name attached, NOT semantic tokens mapped onto: reaching
     for --settling instead of #c9a55c is exactly the divergence this set exists to prevent.
     They are IDENTICAL in all three theme blocks and must stay so. The landing is true black in
     either theme, so a palette that flipped with the theme would render the design's
     counterparts rather than the design.
     ⚠ The contract's own collisions are REPRODUCED, not resolved: Steaming and coherent are the
     same green, In Port and stale the same grey. Flagged in the build note; not fixed here. */
  --fleet-mode-dp: #0A84FF;
  --fleet-mode-steam: #4fbf82;
  --fleet-mode-port: #a1a1a6;
  --fleet-mode-anchor: #c9a55c;
  --fleet-adv: #ffa51f;
  --fleet-stale: #6e6e73;
  /* ADR-0029 D13 — THREE distinct fleet channels, never merged: the operational MODE colour (the
     dot fill), the PDM ADVISORY (ours) which reads AMBER --fleet-adv, and the vessel's own SHIP
     ALARM (as received) which is a SEPARATE, NON-RED channel --fleet-ship-alarm. This SUPERSEDES
     the earlier red vessel-alarm halo (was #ff5a52): red is retired from the fleet presentation,
     and a ship alarm is never shown as red PDM danger.
     Two separate gates on channel 3:
       · the exact non-red hue is OWNER VISUAL DECISION REQUIRED — no final colour is assigned here;
       · the live data is BLOCKED — BUILDER CONTRACT (CLOUD must expose ship-alarm state, D5).
     The channel is scaffolded and inert — nothing renders on it today regardless of this value. */
  --fleet-ship-alarm: transparent;  /* OWNER VISUAL DECISION REQUIRED — placeholder, not final */

  /* ---- TYPE: two stacks, and the second one is used narrowly ----
   *
   * --font-ui is the system UI stack and carries everything: headings, body, labels, table
   * figures, chart axis text. Nothing is downloaded for it, so it renders instantly on a thin
   * satellite link and reads as native on whatever the operator is using.
   *
   * --font-mono is IBM Plex Mono, and it carries TWO things.
   *
   * FIRST, MACHINE IDENTIFIERS, everywhere in the app — sensor tags, audit-record identifiers,
   * provenance stamps and ratification timestamps, code letters and item numbers:
   *
   *   * 0 and O, 1 and l cannot be confused. A tag misread by one character is a different
   *     sensor, and on this product that is a different machine.
   *   * tags align in columns, so a list of them can be scanned down rather than read across.
   *   * a tag always LOOKS like a machine identifier rather than prose, which is what stops a
   *     reader treating a generated plain-language name as the canonical thing.
   *
   * SECOND, THE GLOBE ENTIRE. Continent and ocean names and vessel names are all set in Plex.
   * This supersedes the earlier ruling that the gazetteer takes the UI stack, and it also
   * supersedes the line that once stood here saying Plex was NOT for vessel names. The globe
   * is one surface with one voice; a vessel name in the UI stack beside an ocean name in Plex
   * read as two typographic systems sharing a picture.
   *
   * STILL NOT PLEX: prose, unit symbols, and plain figures. Figures live in the UI stack with
   * tabular numerals, which keeps them aligned without making them look like identifiers —
   * a reading is a measurement, not an identity, and must not dress as one.
   *
   * The face is VENDORED — see assets/fonts/SOURCES.md — so there is no external fetch. The
   * fallback chain is a system mono, which is not vestigial: font-display is swap, so first
   * paint can happen before the face decodes, and an identifier must degrade to another
   * monospace face and NEVER to prose.
   */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-card: 16px;
  --radius-inner: 14px;
  --radius-chip: 9px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141416;
    --bg2: #1b1b1e;
    --card: #1e1e22;
    --card2: #26262b;
    --sidebar: rgba(28, 28, 32, 0.66);

    --text: #f5f5f7;
    --text2: #a1a1a6;
    --text3: #6e6e73;

    --divider: rgba(255, 255, 255, 0.10);
    --divider2: rgba(255, 255, 255, 0.05);
    --hair: 1px solid rgba(255, 255, 255, 0.07);

    --accent: #0a84ff;
    --accent-soft: rgba(10, 132, 255, 0.22);
    --on-accent: #ffffff;
    --scrollbar-thumb: rgba(160, 160, 168, 0.3);
    --healthy: #4fbf82;
    --healthy-soft: rgba(79, 191, 130, 0.17);
    --advisory: #ffa51f;
    --advisory-soft: rgba(255, 165, 31, 0.17);
    --vesselalarm: #ff5a52;
    --vesselalarm-soft: rgba(255, 90, 82, 0.18);
    --settling: #9a8cf5;
    --settling-soft: rgba(154, 140, 245, 0.18);
    --stale: #8a8a90;
    --stale-soft: rgba(138, 138, 144, 0.14);

    /* trend-chart series palette — warm-orange primary, brighter muted complements on dark */
    --series-orange: #ff7a45;   /* PRIMARY — warm orange, solid (index 0) */
    --series-teal:   #4fb8c4;   /* muted teal-slate, dashed (index 1) */
    --series-violet: #a795d6;   /* muted violet, dotted (index 2) */
    --series-steel:  #7fa8cc;   /* muted steel-blue, dash-dot (index 3) */
    --chart-neutral: #8a8a90;
    /* explanatory text stays high-contrast on the dark ground; tooltip is a neutral dark card */
    --chart-ink:   #f5f5f7;
    --chart-ink-2: #c7c7cc;
    --chart-tip-bg: #26262b;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 28px rgba(0, 0, 0, 0.40);
    --shadow-card-hover: 0 2px 5px rgba(0, 0, 0, 0.55), 0 16px 40px rgba(0, 0, 0, 0.50);
    --shadow-chip: 0 1px 1.5px rgba(0, 0, 0, 0.35);
    --shadow-chip-hover: 0 1px 4px rgba(0, 0, 0, 0.5);
    --shadow-sheet: 0 24px 90px rgba(0, 0, 0, 0.62);
    --shadow: var(--shadow-card);

    --globe-sea: #16293c;
    --globe-land: #2b2b31;
    --globe-sea-hi: #1e3852;
    --globe-limb: #000000;
    --globe-shadow: #000000;
    --globe-label: rgba(176, 186, 198, 0.62);
    --globe-space: #000000;
    --globe-atmos: #7fb4ff;
    --globe-night: rgba(4, 8, 15, 0.78);
    --globe-dusk: rgba(20, 30, 50, 0.45);
    --globe-moon: #d8d4cc;
    --globe-space-label: rgba(190, 205, 225, 0.55);
    --globe-space-name: rgba(238, 244, 252, 0.95);
    /* ---- THE FLEET LANDING'S PALETTE — CONTRACT LITERALS ----
       1-to-1 with the ratified export (fleet-landing-source-2026-08-24.dc.html, 5b3890c). These
       are the design's own hexes with a name attached, NOT semantic tokens mapped onto: reaching
       for --settling instead of #c9a55c is exactly the divergence this set exists to prevent.
       They are IDENTICAL in all three theme blocks and must stay so. The landing is true black in
       either theme, so a palette that flipped with the theme would render the design's
       counterparts rather than the design.
       ⚠ The contract's own collisions are REPRODUCED, not resolved: Steaming and coherent are the
       same green, In Port and stale the same grey. Flagged in the build note; not fixed here. */
    --fleet-mode-dp: #0A84FF;
    --fleet-mode-steam: #4fbf82;
    --fleet-mode-port: #a1a1a6;
    --fleet-mode-anchor: #c9a55c;
    --fleet-adv: #ffa51f;
    --fleet-stale: #6e6e73;
    /* ADR-0029 D13 — three distinct fleet channels (see the base block): MODE colour, the PDM
       ADVISORY amber --fleet-adv, and the vessel's own SHIP ALARM as a SEPARATE NON-RED channel.
       The earlier red vessel-alarm (#ff5a52) is retired. Channel 3's hue is OWNER VISUAL DECISION
       REQUIRED and its live data is BLOCKED — BUILDER CONTRACT (D5); it is inert today. */
    --fleet-ship-alarm: transparent;  /* OWNER VISUAL DECISION REQUIRED — placeholder, not final */
  }
}

:root[data-theme="dark"] {
  --bg: #141416;
  --bg2: #1b1b1e;
  --card: #1e1e22;
  --card2: #26262b;
  --sidebar: rgba(28, 28, 32, 0.66);

  --text: #f5f5f7;
  --text2: #a1a1a6;
  --text3: #6e6e73;

  --divider: rgba(255, 255, 255, 0.10);
  --divider2: rgba(255, 255, 255, 0.05);
  --hair: 1px solid rgba(255, 255, 255, 0.07);

  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.22);
  --on-accent: #ffffff;
  --scrollbar-thumb: rgba(160, 160, 168, 0.3);
  --healthy: #4fbf82;
  --healthy-soft: rgba(79, 191, 130, 0.17);
  --advisory: #ffa51f;
  --advisory-soft: rgba(255, 165, 31, 0.17);
  --vesselalarm: #ff5a52;
  --vesselalarm-soft: rgba(255, 90, 82, 0.18);
  --settling: #9a8cf5;
  --settling-soft: rgba(154, 140, 245, 0.18);
  --stale: #8a8a90;
  --stale-soft: rgba(138, 138, 144, 0.14);

  /* trend-chart series palette — warm-orange primary, brighter muted complements on dark */
  --series-orange: #ff7a45;   /* PRIMARY — warm orange, solid (index 0) */
  --series-teal:   #4fb8c4;   /* muted teal-slate, dashed (index 1) */
  --series-violet: #a795d6;   /* muted violet, dotted (index 2) */
  --series-steel:  #7fa8cc;   /* muted steel-blue, dash-dot (index 3) */
  --chart-neutral: #8a8a90;
  /* explanatory text stays high-contrast on the dark ground; tooltip is a neutral dark card */
  --chart-ink:   #f5f5f7;
  --chart-ink-2: #c7c7cc;
  --chart-tip-bg: #26262b;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 28px rgba(0, 0, 0, 0.40);
  --shadow-card-hover: 0 2px 5px rgba(0, 0, 0, 0.55), 0 16px 40px rgba(0, 0, 0, 0.50);
  --shadow-chip: 0 1px 1.5px rgba(0, 0, 0, 0.35);
  --shadow-chip-hover: 0 1px 4px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 24px 90px rgba(0, 0, 0, 0.62);
  --shadow: var(--shadow-card);

  --globe-sea: #16293c;
  --globe-land: #2b2b31;
  --globe-sea-hi: #1e3852;
  --globe-limb: #000000;
  --globe-shadow: #000000;
  --globe-label: rgba(176, 186, 198, 0.62);
  --globe-space: #000000;
  --globe-atmos: #7fb4ff;
  --globe-night: rgba(4, 8, 15, 0.78);
  --globe-dusk: rgba(20, 30, 50, 0.45);
  --globe-moon: #d8d4cc;
  --globe-space-label: rgba(190, 205, 225, 0.55);
  --globe-space-name: rgba(238, 244, 252, 0.95);
  /* ---- THE FLEET LANDING'S PALETTE — CONTRACT LITERALS ----
     1-to-1 with the ratified export (fleet-landing-source-2026-08-24.dc.html, 5b3890c). These
     are the design's own hexes with a name attached, NOT semantic tokens mapped onto: reaching
     for --settling instead of #c9a55c is exactly the divergence this set exists to prevent.
     They are IDENTICAL in all three theme blocks and must stay so. The landing is true black in
     either theme, so a palette that flipped with the theme would render the design's
     counterparts rather than the design.
     ⚠ The contract's own collisions are REPRODUCED, not resolved: Steaming and coherent are the
     same green, In Port and stale the same grey. Flagged in the build note; not fixed here. */
  --fleet-mode-dp: #0A84FF;
  --fleet-mode-steam: #4fbf82;
  --fleet-mode-port: #a1a1a6;
  --fleet-mode-anchor: #c9a55c;
  --fleet-adv: #ffa51f;
  --fleet-stale: #6e6e73;
  /* ADR-0029 D13 — THREE distinct fleet channels, never merged: the operational MODE colour (the
     dot fill), the PDM ADVISORY (ours) which reads AMBER --fleet-adv, and the vessel's own SHIP
     ALARM (as received) which is a SEPARATE, NON-RED channel --fleet-ship-alarm. This SUPERSEDES
     the earlier red vessel-alarm halo (was #ff5a52): red is retired from the fleet presentation,
     and a ship alarm is never shown as red PDM danger.
     Two separate gates on channel 3:
       · the exact non-red hue is OWNER VISUAL DECISION REQUIRED — no final colour is assigned here;
       · the live data is BLOCKED — BUILDER CONTRACT (CLOUD must expose ship-alarm state, D5).
     The channel is scaffolded and inert — nothing renders on it today regardless of this value. */
  --fleet-ship-alarm: transparent;  /* OWNER VISUAL DECISION REQUIRED — placeholder, not final */
}