/* ============================================================
   THEME PALETTES — the single source of truth for colour tokens.

   Loaded by every page: secondary pages get it via theme.css's @import,
   the homepage links it directly (index.html is otherwise self-contained).

   The effective theme is stamped onto <html data-theme> at the edge by
   functions/_middleware.ts, before the browser ever sees the markup. That
   is what keeps the first paint correct instead of flashing the default
   palette and correcting itself a moment later.

   Theme keys here must match the `key` column of the api repo's `themes`
   table. A key that exists in one and not the other renders as the
   fallback with no error anywhere, so keep the two in step.
   ============================================================ */

/* Bare :root carries midnight so a response that somehow arrives without a
   data-theme attribute — a cached shell, a middleware failure — still renders
   the site's original palette rather than an unstyled page.

   --text-sub and --text-muted were lightened from #6B8099/#3A5066 to meet WCAG
   AA. The old values were 4.24:1 and 2.06:1 against --bg-surface. They could
   not be fixed independently: raising --text-muted alone to 4.5:1 would have
   made it lighter than --text-sub and inverted the hierarchy. */
:root,
[data-theme="midnight"] {
  --bg:           #07090F;
  --bg-card:      #0C1220;
  --bg-surface:   #111B2E;
  --border:       #1A2B40;
  --border-hi:    rgba(13,175,187,.30);
  --accent:       #0DAFBB;
  --accent-dim:   rgba(13,175,187,.09);
  --text:         #D8E3F0;
  --text-sub:     #95A9BE;
  --text-muted:   #7389A0;
  --theme-color:  #0A0E17;
  /* Semantic colours. Split out from the raw values they replace because those
     values are ground-dependent: near-black text is right on the bright teal
     accent and wrong on the dark one. */
  --on-accent:         #050810;
  --danger:            #e07070;
  --danger-bg:         rgba(200,50,50,.1);
  --danger-border:     rgba(200,50,50,.2);
  --danger-border-hi:  rgba(200,50,50,.3);
  --warn:              #c8a000;
  --warn-bg:           rgba(200,160,0,.1);
  --warn-border:       rgba(200,160,0,.25);
  --info:              #97a7ff;
  --info-bg:           rgba(130,150,255,.1);
  --info-border:       rgba(130,150,255,.25);
  --bg-nav:            rgba(7,9,15,.90);
  --bg-overlay:        rgba(7,9,15,.97);
  --border-accent:     rgba(13,175,187,.22);
  --shadow-lg:         0 8px 32px rgba(0,0,0,.4);
  --danger-border-strong: rgba(200,50,50,.5);
  --accent-hover:      rgba(13,175,187,.16);
  --glow-strong:       rgba(13,175,187,.13);
  --glow-soft:         rgba(13,175,187,.07);
}

/* Light palette. The accent darkens to #07686F because the midnight teal
   (#0DAFBB) lands around 2.2:1 on white — fine as a glow on a dark ground,
   unreadable as text on a light one. */
[data-theme="daybreak"] {
  --bg:           #FFFFFF;
  --bg-card:      #F7F9FC;
  --bg-surface:   #EEF2F7;
  --border:       #D8E0EA;
  --border-hi:    rgba(7,104,111,.35);
  --accent:       #07686F;
  --accent-dim:   rgba(7,104,111,.08);
  --text:         #0F1826;
  --text-sub:     #4A5A6E;
  --text-muted:   #5C6A7E;
  --theme-color:  #FFFFFF;
  /* Every foreground token clears WCAG AA (4.5:1) against bg, bg-card, AND
     bg-surface — text-muted is the tight one at 4.89:1 on bg-surface. */
  --on-accent:         #FFFFFF;
  --danger:            #B3261E;
  --danger-bg:         rgba(179,38,30,.08);
  --danger-border:     rgba(179,38,30,.25);
  --danger-border-hi:  rgba(179,38,30,.35);
  --warn:              #7A5A00;
  --warn-bg:           rgba(122,90,0,.08);
  --warn-border:       rgba(122,90,0,.25);
  --info:              #2A44B8;
  --info-bg:           rgba(42,68,184,.08);
  --info-border:       rgba(42,68,184,.25);
  --bg-nav:            rgba(255,255,255,.88);
  --bg-overlay:        rgba(255,255,255,.97);
  --border-accent:     rgba(7,104,111,.30);
  --shadow-lg:         0 8px 32px rgba(15,24,38,.14);
  --danger-border-strong: rgba(179,38,30,.5);
  --accent-hover:      rgba(7,104,111,.12);
  --glow-strong:       rgba(7,104,111,.10);
  --glow-soft:         rgba(7,104,111,.05);
}

/* WCAG AAA (7:1) for every text token, including --text-muted, which is the
   one most likely to fail an audit elsewhere. */
[data-theme="contrast"] {
  --bg:           #000000;
  --bg-card:      #0A0A0A;
  --bg-surface:   #141414;
  --border:       #5A5A5A;
  --border-hi:    #4FE3EF;
  --accent:       #4FE3EF;
  --accent-dim:   rgba(79,227,239,.15);
  --text:         #FFFFFF;
  --text-sub:     #E0E0E0;
  --text-muted:   #B8B8B8;
  --theme-color:  #000000;
  /* All four foreground values clear 7:1 on #000000. */
  --on-accent:         #000000;
  --danger:            #FF9E9E;
  --danger-bg:         rgba(255,158,158,.12);
  --danger-border:     rgba(255,158,158,.35);
  --danger-border-hi:  rgba(255,158,158,.5);
  --warn:              #FFD54F;
  --warn-bg:           rgba(255,213,79,.12);
  --warn-border:       rgba(255,213,79,.35);
  --info:              #A9C7FF;
  --info-bg:           rgba(169,199,255,.12);
  --info-border:       rgba(169,199,255,.35);
  --bg-nav:            rgba(0,0,0,.94);
  --bg-overlay:        rgba(0,0,0,.98);
  --border-accent:     rgba(79,227,239,.45);
  --shadow-lg:         0 8px 32px rgba(0,0,0,.75);
  --danger-border-strong: rgba(255,158,158,.6);
  --accent-hover:      rgba(79,227,239,.25);
  --glow-strong:       rgba(79,227,239,.10);
  --glow-soft:         rgba(79,227,239,.05);
}

/* "system" is a resolution mode, not a catalogue row — there is no `system`
   record in the themes table. The server cannot read prefers-color-scheme, so
   it stamps the mode and CSS resolves it here.

   The middleware only ever stamps "system" while daybreak is enabled, so an
   admin who switches the light palette off cannot have it leak back in
   through this branch. */
[data-theme="system"] {
  --bg:           #07090F;
  --bg-card:      #0C1220;
  --bg-surface:   #111B2E;
  --border:       #1A2B40;
  --border-hi:    rgba(13,175,187,.30);
  --accent:       #0DAFBB;
  --accent-dim:   rgba(13,175,187,.09);
  --text:         #D8E3F0;
  --text-sub:     #95A9BE;
  --text-muted:   #7389A0;
  --theme-color:  #0A0E17;
  /* Semantic colours. Split out from the raw values they replace because those
     values are ground-dependent: near-black text is right on the bright teal
     accent and wrong on the dark one. */
  --on-accent:         #050810;
  --danger:            #e07070;
  --danger-bg:         rgba(200,50,50,.1);
  --danger-border:     rgba(200,50,50,.2);
  --danger-border-hi:  rgba(200,50,50,.3);
  --warn:              #c8a000;
  --warn-bg:           rgba(200,160,0,.1);
  --warn-border:       rgba(200,160,0,.25);
  --info:              #97a7ff;
  --info-bg:           rgba(130,150,255,.1);
  --info-border:       rgba(130,150,255,.25);
  --bg-nav:            rgba(7,9,15,.90);
  --bg-overlay:        rgba(7,9,15,.97);
  --border-accent:     rgba(13,175,187,.22);
  --shadow-lg:         0 8px 32px rgba(0,0,0,.4);
  --danger-border-strong: rgba(200,50,50,.5);
  --accent-hover:      rgba(13,175,187,.16);
  --glow-strong:       rgba(13,175,187,.13);
  --glow-soft:         rgba(13,175,187,.07);
}

@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --bg:           #FFFFFF;
    --bg-card:      #F7F9FC;
    --bg-surface:   #EEF2F7;
    --border:       #D8E0EA;
    --border-hi:    rgba(7,104,111,.35);
    --accent:       #07686F;
    --accent-dim:   rgba(7,104,111,.08);
    --text:         #0F1826;
    --text-sub:     #4A5A6E;
    --text-muted:   #5C6A7E;
    --theme-color:  #FFFFFF;
    /* Every foreground token clears WCAG AA (4.5:1) against bg, bg-card, AND
     bg-surface — text-muted is the tight one at 4.89:1 on bg-surface. */
    --on-accent:         #FFFFFF;
    --danger:            #B3261E;
    --danger-bg:         rgba(179,38,30,.08);
    --danger-border:     rgba(179,38,30,.25);
    --danger-border-hi:  rgba(179,38,30,.35);
    --warn:              #7A5A00;
    --warn-bg:           rgba(122,90,0,.08);
    --warn-border:       rgba(122,90,0,.25);
    --info:              #2A44B8;
    --info-bg:           rgba(42,68,184,.08);
    --info-border:       rgba(42,68,184,.25);
    --bg-nav:            rgba(255,255,255,.88);
    --bg-overlay:        rgba(255,255,255,.97);
    --border-accent:     rgba(7,104,111,.30);
    --shadow-lg:         0 8px 32px rgba(15,24,38,.14);
    --danger-border-strong: rgba(179,38,30,.5);
    --accent-hover:      rgba(7,104,111,.12);
    --glow-strong:       rgba(7,104,111,.10);
    --glow-soft:         rgba(7,104,111,.05);
  }
}