/* ══════════════════════════════════════════════════════════════════════
   PI-33 — Theme system + ratified brand tokens
   ----------------------------------------------------------------------
   Token model (three layers):
     1. BRAND PALETTE  — fixed approved hues (--dn/--vb/--or/--su + neutrals).
                         These never change between themes.
     2. SEMANTIC ROLES — surface / text / border / accent tokens that carry
                         MEANING. Components reference these; the theme swaps
                         their values. The existing token names (--wh, --bg,
                         --gr, --st, --fg) are kept AS the semantic layer so
                         the whole portal re-themes without a rewrite.
     3. STATUS         — success / warning / danger / info (+ tints).

   Theme resolution:
     • Default (:root)                         → LIGHT.
     • [data-theme="light"]                    → LIGHT (explicit).
     • [data-theme="dark"]                     → DARK.
     • [data-theme="system"] / no attribute    → follow the OS via
       @media (prefers-color-scheme: dark) — live-updates with the OS.

   The DARK sheet below is PROVISIONAL pending brand-owner sign-off of the
   dark palette, the white wordmark treatment, and the semantic error/
   success/warning colors (PI-33 AC #4). Values are tuned to pass WCAG 2.1 AA
   for text-on-surface pairs.
══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand palette (fixed hues) ── */
  --dn: #12274A;   /* Deep Navy   */
  --vb: #0071AF;   /* Vivid Blue  */
  --or: #E96127;   /* Oravive     */
  --su: #F2A620;   /* Sunray      */
  --ni: #1E1E1E;   /* Near-black  */

  /* ── Neutrals (brand) ── */
  --gr: #262626;   /* Graphite — body text        */
  --st: #5A5A5A;   /* Stone — secondary text (AA) */
  --fg: #A6A6A6;   /* Fog — borders / dividers ONLY (never text: fails AA) */
  --wh: #FFFFFF;   /* Surface (cards, header, modals)  */
  --bg: #F8F9FA;   /* Page background                  */

  /* ── Extended neutrals — ratified named tokens (were scattered literals) ── */
  --border:      #DDE6F0;  /* standard hairline border          */
  --border-soft: #E3E8EE;  /* softer panel / rail border        */
  --surface:     #FFFFFF;  /* semantic alias of --wh            */
  --surface-2:   #F8FBFF;  /* raised / inset light surface      */
  --wash:        #F0F4F8;  /* neutral wash (info panels, chips) */
  --wash-blue:   #EBF5FB;  /* blue wash (hover, tags)           */
  --chip:        #EEF3FA;  /* segmented-control / chip track    */
  --tile:        #F4F7FB;  /* type-icon thumbnail tile          */

  /* ── Semantic text roles ── */
  --heading:  var(--dn);   /* headings / strong labels          */
  --text:     var(--gr);   /* body text                         */
  --muted:    #5A5A5A;     /* muted text — Stone, AA-safe (replaces Fog-as-text) */
  --accent:   var(--vb);   /* links / accent text               */
  --on-brand: #FFFFFF;     /* text on brand-colored backgrounds */

  /* ── Semantic status colors (+ tints) — used as TEXT/TINT (dark-aware) ── */
  --success: #1A7A4A;  --success-tint: #E6F4EA;
  --warning: #8A5410;  --warning-tint: #FDF1E3;
  --danger:  #C0392B;  --danger-tint:  #FBE9E7;
  --info:    #1C5FB0;  --info-tint:    #E7F0FB;

  /* Tint borders for pills / badges / trust chips */
  --success-border: #B7DFC6;
  --info-border:    #BCD6F5;
  --warning-border: #F3D6AC;
  --danger-border:  #F2C2BB;

  /* Neutral + purple chip families (tint fg/bg/border) */
  --neutral-fg: #4A5763;  --neutral-bg: #EEF1F4;  --neutral-border: #D6DDE3;
  --purple-fg:  #6B46A8;  --purple-bg:  #F3EDFA;  --purple-border:  #D9C9F0;

  /* Accent hover — darker Vivid Blue */
  --accent-strong: #005A8E;

  /* Solid status fills — CONSTANT across themes so white text stays legible
     (lifecycle/status badges, content-type badges, toasts). Intentionally NOT
     overridden in the dark blocks below. */
  --solid-draft:   #6C757D;
  --solid-warning: #D9822B;
  --solid-success: #1A7A4A;
  --solid-danger:  #C0392B;
  --solid-purple:  #7A5EA8;
  --solid-info:    #285FB0;
  /* Light danger text/icon for use on the always-dark bulk-action chrome. */
  --danger-soft:   #F9B4B4;

  /* PI-30 — the In-Portal Editor's "focused document" shell. These RE-THEME with
     the portal's Appearance setting (System / Light / Dark) like every other
     surface; the dark sheet below is the approved navy prototype treatment.
     --paper is the single constant: it is the surface the Artifact's OWN
     document paints on, so it must not shift underneath user content. */
  --paper:         #FFFFFF;
  --editor-shell:  #EDF1F6;   /* stage + rail behind the paper */
  --editor-chrome: #FFFFFF;   /* top bar, meta strip, toolbar pill, popovers */
  --editor-ink:    #12274A;   /* primary text on the chrome */
  --editor-ink-2:  #5A5A5A;   /* secondary text                */
  --editor-ink-3:  #5F6B7A;   /* footnotes / placeholders      */
  --editor-edge:   #DDE6F0;   /* hairlines                     */
  --editor-fill:   #F0F4F8;   /* chip / input fill             */
  --editor-fill-2: #E1EAF4;   /* hover fill                    */
  --editor-accent: #0071AF;   /* hover + emphasis accent       */
  --editor-shadow: 0 2px 14px rgba(18, 39, 74, .12);
  /* PI-33 Oravive rule — white-on-Oravive (--or vs #fff ≈ 3:1) only passes AA for
     LARGE CTAs. Small Oravive-filled indicators (count badges, toggles) use this
     near-black ink instead (--on-or vs --or ≈ 5:1, AA at any size). Constant. */
  --on-or:         #1E1E1E;

  /* Back-compat aliases (kept: referenced by catalog / modal component code) */
  --pi-tile-bg: var(--tile);
  --vb-tint:    var(--tile);
}

/* ── Explicit LIGHT (manual override) — same as :root defaults ── */
:root[data-theme="light"] { color-scheme: light; }
:root:not([data-theme="dark"]) { color-scheme: light; }

/* ── DARK palette (PROVISIONAL — pending brand-owner sign-off) ────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Brand hues stay fixed; only neutrals / semantic roles swap. */
  --gr: #D5DCE6;
  --st: #A2ACBA;
  --fg: #3A4557;

  --wh: #19212E;
  --bg: #0F141C;

  --border:      #2A3444;
  --border-soft: #2A3444;
  --surface:     #19212E;
  --surface-2:   #212B3A;
  --wash:        #1E2735;
  --wash-blue:   #1B2A3D;
  --chip:        #232E3F;
  --tile:        #212B3A;

  --heading:  #EAF0F8;
  --text:     #D5DCE6;
  --muted:    #9AA4B2;
  --accent:   #5BB4E6;   /* lightened blue — AA on dark surfaces */
  --on-brand: #FFFFFF;

  --success: #4FB07A;  --success-tint: #12301F;
  --warning: #E0A64B;  --warning-tint: #332512;
  --danger:  #E8695C;  --danger-tint:  #3A1B18;
  --info:    #5BB4E6;  --info-tint:    #132A45;

  --success-border: #1E4A32;
  --info-border:    #1F406A;
  --warning-border: #5A431C;
  --danger-border:  #5E2A24;

  --neutral-fg: #A2ACBA;  --neutral-bg: #232E3F;  --neutral-border: #2A3444;
  --purple-fg:  #C3AEE8;  --purple-bg:  #241C33;  --purple-border:  #3A2E52;

  /* --accent-strong is intentionally NOT overridden: it is a button-HOVER fill
     that carries white text, so it must stay a dark blue in both themes. */

  --pi-tile-bg: #212B3A;
  --vb-tint:    #1B2A3D;

  /* PI-30 editor shell — the approved navy prototype treatment. --paper is
     intentionally NOT overridden (constant white document surface). */
  --editor-shell:  #0D1D38;
  --editor-chrome: #12274A;
  --editor-ink:    #FFFFFF;
  --editor-ink-2:  #C7D3E2;
  --editor-ink-3:  #93A3BA;
  --editor-edge:   #2C4166;
  --editor-fill:   #1A3358;
  --editor-fill-2: #244271;
  --editor-accent: #F2A620;
  --editor-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

/* ── SYSTEM — follow the OS, live-updating (PI-33 AC #1) ───────────────────
   Applies the dark sheet when the OS is dark AND the user has not manually
   picked light/dark. The [data-theme="system"] selector is what the app sets
   for the explicit "System" choice; :not([data-theme]) is a defensive default
   for the first paint before the pre-paint script runs. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"],
  :root:not([data-theme]) {
    color-scheme: dark;

    --gr: #D5DCE6;
    --st: #A2ACBA;
    --fg: #3A4557;

    --wh: #19212E;
    --bg: #0F141C;

    --border:      #2A3444;
    --border-soft: #2A3444;
    --surface:     #19212E;
    --surface-2:   #212B3A;
    --wash:        #1E2735;
    --wash-blue:   #1B2A3D;
    --chip:        #232E3F;
    --tile:        #212B3A;

    --heading:  #EAF0F8;
    --text:     #D5DCE6;
    --muted:    #9AA4B2;
    --accent:   #5BB4E6;
    --on-brand: #FFFFFF;

    --success: #4FB07A;  --success-tint: #12301F;
    --warning: #E0A64B;  --warning-tint: #332512;
    --danger:  #E8695C;  --danger-tint:  #3A1B18;
    --info:    #5BB4E6;  --info-tint:    #132A45;

    --success-border: #1E4A32;
    --info-border:    #1F406A;
    --warning-border: #5A431C;
    --danger-border:  #5E2A24;

    --neutral-fg: #A2ACBA;  --neutral-bg: #232E3F;  --neutral-border: #2A3444;
    --purple-fg:  #C3AEE8;  --purple-bg:  #241C33;  --purple-border:  #3A2E52;

    /* --accent-strong stays a dark blue (button-hover fill with white text). */

    --pi-tile-bg: #212B3A;
    --vb-tint:    #1B2A3D;

    /* PI-30 editor shell — see the [data-theme="dark"] block above. */
    --editor-shell:  #0D1D38;
    --editor-chrome: #12274A;
    --editor-ink:    #FFFFFF;
    --editor-ink-2:  #C7D3E2;
    --editor-ink-3:  #93A3BA;
    --editor-edge:   #2C4166;
    --editor-fill:   #1A3358;
    --editor-fill-2: #244271;
    --editor-accent: #F2A620;
    --editor-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  }
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* PI-33 — html fills the viewport (base for min-height:100vh below), but body
   must NOT be locked to height:100%. A fixed-height body becomes the sticky
   "containing block" for .shell-header, so the sticky header could only stay
   pinned for the first viewport and then scrolled off on long pages. Letting
   body grow to its content height makes the window the scroller, so the header
   (and the sticky table header, pinned under it) stays put through a full scroll. */
html {
  height: 100%;
}

body {
  font-family: Lato, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Smooth the theme flip (surface + text). Individual components inherit. */
  transition: background-color .18s ease, color .18s ease;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Lato", Arial, sans-serif;
}

code {
  font-family: "Cascadia Code", Consolas, monospace;
  background: var(--wash);
  color: var(--text);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .85em;
}

/* ── Blue-orange accent bar across very top of page ─────────────────── */
body::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--vb) 0%, var(--or) 100%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}