/* ==========================================================================
   Uptime Academy — design tokens (Midnight Stream)

   Sections 1–4 are copied verbatim from design/midnight-stream/tokens/
   (colors.css, typography.css, spacing.css, effects.css). Do not edit the
   values here; edit the export and regenerate. Fonts load from the layout
   (<link> to Google Fonts) rather than fonts.css so the preconnect hints apply.

   Section 1 is the semantic colour contract with both themes (P4.5 §1–2):
   :root holds the light palette; the dark palette applies through
   prefers-color-scheme when <html> has no data-theme, and through
   [data-theme="dark"] when PHP has written one. Every hex and rgba() in this
   file is a token definition; components only ever use var(--name).

   Section 5 aliases the brief's token names (§9) onto the export's names so
   both vocabularies resolve to the same value, then adds the layer the P0
   shell needs (type scale, spacing, layout, focus ring, motion) and the print
   override (P4.5 §6 check 11).
   ========================================================================== */

/* 1. colors.css */
/* Midnight Stream — colour tokens. Two themes (Uptime Academy P4.5).

   Semantic layer: components use only these names. :root carries the light
   palette plus the theme-independent set; the dark palette is supplied by
   prefers-color-scheme while <html> has no data-theme, and by
   [data-theme="dark"] when it does. The attribute always wins.

   The lifted dark values supersede the original near-black (#030608 family)
   for Uptime Academy. healingstreams.tv and the HSTV Android app still ship
   the near-black set; that is their roadmaps' call.

   Contrast, measured: text-1 ≥ 12:1 and text-2 ≥ 7:1 on bg, text-3 ≥ 4.5:1 on
   bg, surface, elevated and sunken, accent ≥ 4.5:1 on bg, accent-on ≥ 4.5:1 on
   accent, every status colour ≥ 4.5:1 on its -soft pill over bg. */

:root{
color-scheme:light;
/* light — daylight: warm-neutral paper, not a lightbox */
--bg:#f4f6f8;
--surface:#ffffff;
--elevated:#ffffff;
--sunken:#e9edf1;
--hover:#e9edf1; /* interactive fill: rows, ghost and secondary buttons, nav items */
--border:#dde3ea;
--border-strong:#c0cad6;
--text-1:#0f1620;
--text-2:#425266;
--text-3:#5b6b80;
--text-strong:#070b11; /* display figures and titles set a step past text-1 */
--accent:#006f99; /* the bright cyan cannot carry contrast on paper; same hue family */
--accent-hover:#005a7d;
--accent-on:#ffffff;
--accent-soft:rgba(0,111,153,.08); /* active fills, accent pills */
--accent-glow:rgba(0,111,153,.25); /* focus halo */
--live:#b92222;
--success:#15753a;
--warning:#7f5508;
--live-on:#ffffff;
--live-hover:#9a1b1b;
--live-soft:rgba(185,34,34,.08);
--success-soft:rgba(21,117,58,.08);
--warning-soft:rgba(127,85,8,.08);
--live-line:rgba(185,34,34,.45);
--success-line:rgba(21,117,58,.45);
--nav-glass:rgba(244,246,248,.85); /* the scrolled nav: translucent bg under blur */
--shadow-1:0 1px 2px rgba(15,22,32,.08);
--shadow-2:0 24px 64px rgba(15,22,32,.18);

/* on-image, both themes: full-bleed photographs stay dark, so anything that
   sits over one uses this fixed set rather than the theme (P4.5 §3) */
--on-image:#ffffff;
--on-image-2:rgba(255,255,255,.85);
--on-image-3:rgba(255,255,255,.62);
--on-image-line:rgba(255,255,255,.32);
--on-image-fill:rgba(255,255,255,.1);
--on-image-hover:rgba(255,255,255,.18);
--on-image-bg:#0a0f15; /* the panel under the photograph while it loads or holds */
--on-image-scrim:rgba(3,6,8,.9); /* bottom-up protection ramp behind text */
--on-image-scrim-soft:rgba(3,6,8,.6); /* badge and tally backdrops */
--on-image-shadow:0 1px 3px rgba(3,6,8,1);
--on-image-shadow-lg:0 2px 24px rgba(3,6,8,.9),0 1px 3px rgba(3,6,8,1);
--on-image-accent:#00d4ff;
--on-image-accent-hover:#4ae0ff;
--on-image-accent-on:#04131a;
--on-image-live:#ef4444;
--on-image-success:#22c55e;

/* aliases: brief §9 and v1 names resolve to the semantic layer; no new code uses them */
--accent-dim:var(--accent-hover);
--on-accent:var(--accent-on);
--surface-nav:var(--nav-glass);
--live-glow:var(--live-soft);
--success-glow:var(--success-soft);
--warning-glow:var(--warning-soft);
--surface-page:var(--bg);
--surface-card:var(--surface);
--surface-raised:var(--elevated);
--text-body:var(--text-1);
--text-secondary:var(--text-2);
--text-muted:var(--text-3);
--text-link:var(--accent);
--action-primary:var(--accent);
--action-primary-hover:var(--accent-hover);
--action-primary-text:var(--accent-on);
--focus-ring:var(--accent);
--status-live:var(--live);
--status-success:var(--success);
--status-warning:var(--warning);
}

/* dark — lifted: a control room, not a cave. Declared twice on purpose: once
   for the system preference (no attribute), once for the explicit choice. */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
color-scheme:dark;
--bg:#0e131a;
--surface:#161d26;
--elevated:#1d2530;
--sunken:#0a0f15;
--hover:#1d2530;
--border:#263041;
--border-strong:#35435a;
--text-1:#e4eaf2;
--text-2:#a8b6c8;
--text-3:#7a8ea8;
--text-strong:#ffffff;
--accent:#00d4ff;
--accent-hover:#4ae0ff;
--accent-on:#04131a;
--accent-soft:rgba(0,212,255,.15);
--accent-glow:rgba(0,212,255,.25);
--live:#f26060;
--success:#22c55e;
--warning:#f59e0b;
--live-on:#1a0608;
--live-hover:#f57575;
--live-soft:rgba(242,96,96,.12);
--success-soft:rgba(34,197,94,.15);
--warning-soft:rgba(245,158,11,.15);
--live-line:rgba(242,96,96,.45);
--success-line:rgba(34,197,94,.45);
--nav-glass:rgba(14,19,26,.82);
--shadow-1:0 1px 2px rgba(0,0,0,.4);
--shadow-2:0 24px 64px rgba(0,0,0,.6);
}
}
:root[data-theme="dark"]{
color-scheme:dark;
--bg:#0e131a;
--surface:#161d26;
--elevated:#1d2530;
--sunken:#0a0f15;
--hover:#1d2530;
--border:#263041;
--border-strong:#35435a;
--text-1:#e4eaf2;
--text-2:#a8b6c8;
--text-3:#7a8ea8;
--text-strong:#ffffff;
--accent:#00d4ff;
--accent-hover:#4ae0ff;
--accent-on:#04131a;
--accent-soft:rgba(0,212,255,.15);
--accent-glow:rgba(0,212,255,.25);
--live:#f26060;
--success:#22c55e;
--warning:#f59e0b;
--live-on:#1a0608;
--live-hover:#f57575;
--live-soft:rgba(242,96,96,.12);
--success-soft:rgba(34,197,94,.15);
--warning-soft:rgba(245,158,11,.15);
--live-line:rgba(242,96,96,.45);
--success-line:rgba(34,197,94,.45);
--nav-glass:rgba(14,19,26,.82);
--shadow-1:0 1px 2px rgba(0,0,0,.4);
--shadow-2:0 24px 64px rgba(0,0,0,.6);
}
/* explicit light repeats :root so the attribute state is self-describing */
:root[data-theme="light"]{
color-scheme:light;
--bg:#f4f6f8;
--surface:#ffffff;
--elevated:#ffffff;
--sunken:#e9edf1;
--hover:#e9edf1;
--border:#dde3ea;
--border-strong:#c0cad6;
--text-1:#0f1620;
--text-2:#425266;
--text-3:#5b6b80;
--text-strong:#070b11;
--accent:#006f99;
--accent-hover:#005a7d;
--accent-on:#ffffff;
--accent-soft:rgba(0,111,153,.08);
--accent-glow:rgba(0,111,153,.25);
--live:#b92222;
--success:#15753a;
--warning:#7f5508;
--live-on:#ffffff;
--live-hover:#9a1b1b;
--live-soft:rgba(185,34,34,.08);
--success-soft:rgba(21,117,58,.08);
--warning-soft:rgba(127,85,8,.08);
--live-line:rgba(185,34,34,.45);
--success-line:rgba(21,117,58,.45);
--nav-glass:rgba(244,246,248,.85);
--shadow-1:0 1px 2px rgba(15,22,32,.08);
--shadow-2:0 24px 64px rgba(15,22,32,.18);
}

/* 2. typography.css */
:root{
--font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
--text-xs:12px;
--text-sm:14px;
--text-md:16px;
--text-lg:20px;
--text-xl:25px;
--text-2xl:31px;
--text-3xl:39px;
--text-4xl:49px;
--leading-body:1.6;
--leading-heading:1.15;
--leading-tight:1.25;
--tracking-heading:-0.02em;
--measure:68ch;
--numeric:tabular-nums; /* @kind other */
}

/* 3. spacing.css */
:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-24:96px;
--radius-sm:8px;
--radius-md:14px;
--radius-lg:22px;
--radius-pill:999px;
--content-max:1180px;
--gutter:24px;
--gutter-mobile:16px;
--nav-height:64px;
--touch-min:44px;
--control-h:44px;
--control-h-sm:36px;
}

/* 4. effects.css */
:root{
--hairline:1px solid var(--border);
--hairline-strong:1px solid var(--border-strong);
--focus:0 0 0 2px var(--bg),0 0 0 4px var(--accent);
--shadow-dialog:var(--shadow-2);
--glow-accent:0 0 0 4px var(--accent-glow);
--nav-blur:blur(12px); /* @kind other */
--ease:cubic-bezier(.2,0,0,1); /* @kind other */
--duration:140ms; /* @kind other */
--duration-slow:220ms; /* @kind other */
}

/* 5. Brief aliases (UPTIME-BRIEF.md §9 names → export tokens) and the shell layer */
:root{
  /* brief §9 names */
  --bg-base:var(--bg); --bg-surface:var(--surface); --bg-elevated:var(--elevated);
  --text-primary:var(--text-1);
  --radius:var(--radius-md);
  --font:var(--font-sans);
  /* type scale */
  --fs-xs:var(--text-xs); --fs-sm:var(--text-sm); --fs-base:var(--text-md); --fs-lg:var(--text-lg);
  --fs-xl:var(--text-xl); --fs-2xl:var(--text-2xl); --fs-3xl:var(--text-3xl); --fs-4xl:var(--text-4xl);
  --lh-tight:var(--leading-heading); --lh-body:var(--leading-body);
  /* spacing — 4px base */
  --s-1:var(--space-1); --s-2:var(--space-2); --s-3:var(--space-3); --s-4:var(--space-4); --s-5:var(--space-6);
  --s-6:var(--space-8); --s-7:var(--space-12); --s-8:var(--space-16); --s-9:var(--space-24);
  --container:var(--content-max); --nav-h:var(--nav-height);
  --ring:var(--focus);
  --dur-fast:120ms; --dur:var(--duration); --dur-slow:var(--duration-slow);
}
@media (max-width:640px){ :root{ --gutter:var(--gutter-mobile); } }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
/* Print: paper is white and ink is dark whatever the theme (P4.5 check 11). The
   literals here are the paper palette, not a theme. The three selectors tie the
   specificity of every theme block above so this wins by source order. */
@media print{
  :root,:root[data-theme],:root:not([data-theme]){
    color-scheme:light;
    --bg:#fff; --surface:#fff; --elevated:#fff; --sunken:#fff; --hover:#fff;
    --border:#999; --border-strong:#666;
    --text-1:#000; --text-2:#222; --text-3:#444; --text-strong:#000;
    --accent:#005a7d; --accent-hover:#005a7d; --accent-on:#fff; --accent-soft:#fff; --accent-glow:#fff;
    --live:#7a1414; --success:#0f5a2c; --warning:#5a3c05; --live-on:#fff;
    --live-soft:#fff; --success-soft:#fff; --warning-soft:#fff;
    --nav-glass:#fff; --shadow-1:none; --shadow-2:none;
  }
}