/* ============================================================
   FlightPro Ops — Theme tokens · "fp web"
   Extracted from Design/fp web/FlightPro.dc.html (dispatch/gantt
   mockup): system UI type, single blue primary accent, soft
   8-10px radii, fully-rounded status pills.
   :root = LIGHT (source of truth); html[data-theme="dark"] = DARK.

   Usage: link this file in <head> BEFORE the page's own <style>,
   then reference colours via var(--token). prefs.js sets the
   html[data-theme] attribute from the saved preference.
   ============================================================ */

:root {
  /* Surfaces */
  --bg-page:           #eef1f4;
  --bg-card:           #ffffff;
  --bg-sidebar:        #eef1f4;
  --bg-input:          #eef1f4;
  --bg-elevated:       #ffffff;

  /* Borders */
  --border:            #dde1e6;
  --border-subtle:     #eef1f4;
  --border-header:     #dde1e6;

  /* Text */
  --text-primary:      #1b1f24;
  --text-secondary:    #3d444d;
  --text-muted:        #5b636d;
  --text-faint:        #6b7480;

  /* Accents — single blue primary (buttons, active nav, links, avatars);
     red reserved for danger/cancelled/grounded only. */
  --accent-red:        #b13a22;
  --accent-navy:       #1f7ae0;
  --accent-green:      #2f9e50;
  --accent-green-dark: #1f7a3a;
  --accent-amber:      #a35410;
  --accent-blue:       #175db1;
  --accent-purple:     #7c57d4;

  /* Effects */
  --shadow:            0 1px 2px rgba(27,31,36,.08);
  --focus-ring:        0 0 0 3px rgba(31,122,224,.35);

  /* Status pills — bg / text / dot */
  --pill-ok-bg:#e0f4e6;      --pill-ok-text:#1f7a3a;      --pill-ok-dot:#2f9e50;
  --pill-info-bg:#e2eefc;    --pill-info-text:#175db1;    --pill-info-dot:#1f7ae0;
  --pill-warn-bg:#faeadd;    --pill-warn-text:#a35410;    --pill-warn-dot:#c96f2e;
  --pill-danger-bg:#fbe3de;  --pill-danger-text:#b13a22;  --pill-danger-dot:#b13a22;
  --pill-maint-bg:#f0edfb;   --pill-maint-text:#5c35a8;   --pill-maint-dot:#7c57d4;
  --pill-neutral-bg:#e3e7ec; --pill-neutral-text:#5b636d; --pill-neutral-dot:#6b7480;

  /* Flight status badges — bg / text */
  --badge-airborne-bg:#e2eefc;  --badge-airborne-text:#175db1;
  --badge-released-bg:#e0f4e6;  --badge-released-text:#1f7a3a;
  --badge-validated-bg:#eef1f4; --badge-validated-text:#3d444d;
  --badge-draft-bg:#eef1f4;     --badge-draft-text:#6b7480;
  --badge-completed-bg:#eef1f4; --badge-completed-text:#3d444d;
  --badge-cancelled-bg:#fbe3de; --badge-cancelled-text:#b13a22;
}

html[data-theme="dark"] {
  /* Surfaces */
  --bg-page:           #16191d;
  --bg-card:           #1b1f24;
  --bg-sidebar:        #191d21;
  --bg-input:          #191d21;
  --bg-elevated:       #22262b;

  /* Borders */
  --border:            #2a2f36;
  --border-subtle:     #23282e;
  --border-header:     #2a2f36;

  /* Text */
  --text-primary:      #e8eaed;
  --text-secondary:    #c8cdd3;
  --text-muted:        #8a929c;
  --text-faint:        #767d87;

  /* Accents */
  --accent-red:        #ef8a75;
  --accent-navy:       #4d9bf0;
  --accent-green:      #2ea36e;
  --accent-green-dark: #6fd68f;
  --accent-amber:      #eda468;
  --accent-blue:       #7db8f2;
  --accent-purple:     #9b78e8;

  --shadow:            0 1px 2px rgba(0,0,0,.45);
  --focus-ring:        0 0 0 3px rgba(77,143,230,.45);

  /* Status pills — deep tints, lighter hue text/dot */
  --pill-ok-bg:#1c3a26;      --pill-ok-text:#6fd68f;      --pill-ok-dot:#6fd68f;
  --pill-info-bg:#1c2f47;    --pill-info-text:#7db8f2;    --pill-info-dot:#7db8f2;
  --pill-warn-bg:#3d2a18;    --pill-warn-text:#eda468;    --pill-warn-dot:#eda468;
  --pill-danger-bg:#3e2019;  --pill-danger-text:#ef8a75;  --pill-danger-dot:#ef8a75;
  --pill-maint-bg:#221a38;   --pill-maint-text:#b497f0;   --pill-maint-dot:#9b78e8;
  --pill-neutral-bg:#262b31; --pill-neutral-text:#c8cdd3; --pill-neutral-dot:#8a929c;

  /* Flight status badges — bg / text */
  --badge-airborne-bg:#1c2f47;  --badge-airborne-text:#7db8f2;
  --badge-released-bg:#1c3a26;  --badge-released-text:#6fd68f;
  --badge-validated-bg:#262b31; --badge-validated-text:#c8cdd3;
  --badge-draft-bg:#262b31;     --badge-draft-text:#8a929c;
  --badge-completed-bg:#262b31; --badge-completed-text:#c8cdd3;
  --badge-cancelled-bg:#3e2019; --badge-cancelled-text:#ef8a75;
}

/* ============================================================
   "occ" — the Crew-Ops OCC palette, as a THIRD theme.
   PREVIEW, 2026-08-26. Nothing changes until html[data-theme="occ"]
   is set; light and dark are untouched above.

   Tokens transcribed from crew-ops-program/skeleton/packages/web/src/
   styles.css, which lifts them from design/interface-design.html
   (.ui-dark). That document is Crew-Ops' authority for colour
   SEMANTICS, and the semantics are the part worth borrowing:

     cyan   = the system's own voice — selection, focus, "this is live"
     amber  = a caution a human must read, never a failure
     green  = a legal verdict, and nothing else
     red    = an illegal verdict or a refusal, and nothing else
     magenta= discretion — a human overrode something, on the record

   FlightPro's own dark theme is a neutral grey with a blue accent;
   this one is colder, denser and reserves its accents for verdicts.
   Where FlightPro has a token Crew-Ops has no equivalent for
   (purple/maintenance, the flight-status badges), the nearest
   semantic match is used and named in a comment rather than
   inventing a colour.
   ============================================================ */
html[data-theme="occ"] {
  /* Surfaces — near-black, panels lifted a step at a time */
  --bg-page:           #080d11;
  --bg-card:           #111a21;
  --bg-sidebar:        #0c1419;
  --bg-input:          #0c1419;
  --bg-elevated:       #16212a;

  /* Borders */
  --border:            #24313b;
  --border-subtle:     #1a242c;
  --border-header:     #24313b;

  /* Text */
  --text-primary:      #e3ebf1;
  --text-secondary:    #93a4b0;
  --text-muted:        #6c7d89;
  --text-faint:        #6c7d89;

  /* Accents — each one means a thing */
  --accent-red:        #ef7168;  /* illegal / refused */
  --accent-navy:       #4fc3de;  /* the system's own voice: selection, focus */
  --accent-green:      #54be8b;  /* legal verdict */
  --accent-green-dark: #54be8b;
  --accent-amber:      #e0a24a;  /* a caution to read, not a failure */
  --accent-blue:       #4fc3de;
  --accent-purple:     #d479b4;  /* discretion — a human overrode something */

  --shadow:            0 1px 2px rgba(0,0,0,.6);
  --focus-ring:        0 0 0 2px rgba(79,195,222,.55);

  /* Status pills — Crew-Ops' shade pairs (ink on its own sunk tint) */
  --pill-ok-bg:#0e2a20;      --pill-ok-text:#54be8b;      --pill-ok-dot:#54be8b;
  --pill-info-bg:#0f2e38;    --pill-info-text:#4fc3de;    --pill-info-dot:#4fc3de;
  --pill-warn-bg:#2f230e;    --pill-warn-text:#e0a24a;    --pill-warn-dot:#e0a24a;
  --pill-danger-bg:#331714;  --pill-danger-text:#ef7168;  --pill-danger-dot:#ef7168;
  --pill-maint-bg:#2d1324;   --pill-maint-text:#d479b4;   --pill-maint-dot:#d479b4;
  --pill-neutral-bg:#16212a; --pill-neutral-text:#93a4b0; --pill-neutral-dot:#6c7d89;

  /* Flight status badges — mapped to the nearest verdict semantics */
  --badge-airborne-bg:#0f2e38;  --badge-airborne-text:#4fc3de;
  --badge-released-bg:#0e2a20;  --badge-released-text:#54be8b;
  --badge-validated-bg:#16212a; --badge-validated-text:#93a4b0;
  --badge-draft-bg:#16212a;     --badge-draft-text:#6c7d89;
  --badge-completed-bg:#16212a; --badge-completed-text:#93a4b0;
  --badge-cancelled-bg:#331714; --badge-cancelled-text:#ef7168;
}

/* ============================================================
   SHAPE + TYPE tokens — added 2026-08-26 alongside the modernist
   preview. The defaults below are EXACTLY today's fp-web values,
   so nothing changes anywhere: no existing page reads these yet
   (every page hardcodes 999px / 10px / 8px), and a page that does
   start reading them gets the same pixels it has now.

   They exist because a *style* is not only colour. The three themes
   above differ in palette alone; modernism differs in shape — square
   corners, no shadow, wider tracking on the small caps — and that
   cannot be said in colour tokens.

   :root = fp web (source of truth). Attribute selectors below
   override regardless of source order (0,1,1 beats 0,1,0).
   ============================================================ */
:root {
  --radius-pill:    999px;   /* status pills, badges, tags */
  --radius-card:    10px;    /* cards, panels, modals */
  --radius-control: 8px;     /* buttons, nav rows, inputs, tabs */
  --radius-chip:    6px;     /* swatches, small inline chips */
  --track-label:    .08em;   /* uppercase table heads / nav section heads */
  --track-heading:  -.015em; /* page titles */
  --rule-masthead:  1px;     /* the rule under the top bar */
}

/* ============================================================
   "modernist" — a FOURTH theme. PREVIEW, 2026-08-26.
   Nothing changes until html[data-theme="modernist"] is set;
   light, dark and occ above are untouched.

   The idiom is Swiss / International Typographic Style, read into
   an ops tool:

     paper      the ground is white, not grey. Panels are not boxes
                on a background — they are fields on the page,
                separated by hairline rules, never by fills.
     ink        the system's own voice is BLACK, not blue. Primary
                buttons, active nav, the logo, focus — all ink. This
                is the one real trade-off in here: fp web says
                --accent-navy is the primary accent, and modernism
                says chrome should not compete with content.
     colour     is meaning, and nothing else. Red is a breach, amber
                a caution, green a legal verdict. Because chrome is
                ink, every saturated pixel left on screen is a fact.
     no capsule the pill loses its tinted lozenge: bg goes
                transparent and the colour is carried by the text and
                the dot. Shape stops being decoration; --radius-* = 0.
     no shadow  --shadow: none. Depth is a skeuomorphism; a rule is
                honest about being flat.
     air        wider tracking on the small caps, so a 10px label
                reads as a label instead of shrunken body text.

   Judge it on /dev/modernist-preview.html (the vocabulary) and
   /dev/dashboard-modernist.html (your own data, dense screen).
   ============================================================ */
html[data-theme="modernist"] {
  /* Surfaces — paper. One grey, used only for a genuinely lifted band. */
  --bg-page:           #ffffff;
  --bg-card:           #ffffff;
  --bg-sidebar:        #ffffff;
  --bg-input:          #ffffff;
  --bg-elevated:       #f2f2f2;

  /* Borders — the whole layout is carried by these. A heavy black
     rule under the masthead, hairlines everywhere else. */
  --border:            #c6c6c6;
  --border-subtle:     #e6e6e6;
  --border-header:     #0a0a0a;

  /* Text — a true ink black, then three honest steps of grey */
  --text-primary:      #0a0a0a;
  --text-secondary:    #333333;
  --text-muted:        #6a6a6a;
  --text-faint:        #8c8c8c;

  /* Accents — chrome is ink; saturation is reserved for meaning */
  --accent-red:        #d0021b;  /* breach, cancelled, grounded */
  --accent-navy:       #0a0a0a;  /* the system's own voice: primary, active, focus */
  --accent-green:      #10713a;  /* legal verdict */
  --accent-green-dark: #0f5c30;
  --accent-amber:      #8a5100;  /* a caution to read, not a failure */
  --accent-blue:       #1a3fd6;  /* info / link text — the one non-ink chrome colour */
  --accent-purple:     #5b2fb5;  /* maintenance */

  /* Effects — flat, and a hard ring with no blur and no alpha */
  --shadow:            none;
  --focus-ring:        0 0 0 2px #0a0a0a;

  /* Shape — square, everywhere */
  --radius-pill:       0;
  --radius-card:       0;
  --radius-control:    0;
  --radius-chip:       0;

  /* Type — wide small caps, tighter headings */
  --track-label:       .18em;
  --track-heading:     -.02em;
  --rule-masthead:     2px;

  /* Status pills — NO lozenge. The tint is gone; text and dot carry it. */
  --pill-ok-bg:transparent;      --pill-ok-text:#10713a;      --pill-ok-dot:#10713a;
  --pill-info-bg:transparent;    --pill-info-text:#1a3fd6;    --pill-info-dot:#1a3fd6;
  --pill-warn-bg:transparent;    --pill-warn-text:#8a5100;    --pill-warn-dot:#c47a00;
  --pill-danger-bg:transparent;  --pill-danger-text:#d0021b;  --pill-danger-dot:#d0021b;
  --pill-maint-bg:transparent;   --pill-maint-text:#5b2fb5;   --pill-maint-dot:#5b2fb5;
  --pill-neutral-bg:transparent; --pill-neutral-text:#6a6a6a; --pill-neutral-dot:#8c8c8c;

  /* Flight status badges — same treatment: the word, set in its colour */
  --badge-airborne-bg:transparent;  --badge-airborne-text:#1a3fd6;
  --badge-released-bg:transparent;  --badge-released-text:#10713a;
  --badge-validated-bg:transparent; --badge-validated-text:#333333;
  --badge-draft-bg:transparent;     --badge-draft-text:#8c8c8c;
  --badge-completed-bg:transparent; --badge-completed-text:#6a6a6a;
  --badge-cancelled-bg:transparent; --badge-cancelled-text:#d0021b;
}