/* =============================================================================
   ScillintED_theme.css - APP PALETTE (single source of truth for the in-app look)
   -----------------------------------------------------------------------------
   Loaded by every in-app + secondary page AFTER ScillintED_tokens.css, which it
   intentionally overrides with the Scillint app palette (deep blue #0A1A4A,
   coral #ED5555, cream #f5f4f1, darkened frames/fonts).

   CHANGE FRAMES / FONTS / COLORS HERE - one edit propagates site-wide.
   (Buttons live in components.css + buttons.js; scales/spacing in tokens.css.)

   NOT linked by the landing pages (index.html / ScillintED_index.html) - they
   keep the marketing palette. Extracted from the per-page :root blocks that
   were duplicated across 6 app pages (d441 #324).
============================================================================= */

:root{--brand-coral:#ED5555;--brand-navy:#0A1A4A;--brand-ink:#15182A;--brand-cream:#F5F4F1;--surface-page:#F5F4F1;--surface-card:#ffffff;--surface-card-alt:#fafaf6;--surface-hover:#f0ede5;--text-primary:#15182A;--text-secondary:#4a4d57;--text-tertiary:#6b6e7a;--text-muted:#8e8a7e;--text-on-dark:#F5F4F1;--border-card-top:#cdc9bd;--border-card-inner:#d6d3c8;--border-input-focus:#0A1A4A;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;--space-10:64px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:14px;--radius-2xl:16px;--radius-full:9999px;--shadow-xs:0 1px 2px rgba(15,24,42,0.04);--shadow-sm:0 1px 4px rgba(15,24,42,0.05);--shadow-md:0 2px 8px rgba(15,24,42,0.06);--shadow-lg:0 4px 14px rgba(15,24,42,0.10);--shadow-focus:0 0 0 3px rgba(10,26,74,0.20);--duration-fast:150ms;--duration-normal:250ms;--duration-slow:400ms;--ease-out:cubic-bezier(0.16,1,0.3,1);--ease-in-out:cubic-bezier(0.65,0,0.35,1);--font-sans:'DM Sans',system-ui,-apple-system,sans-serif;--font-display:'Newsreader',Georgia,serif;--blue:#0A1A4A;--blue-light:#e8f0fb;--blue-mid:#c5d5f5;--orange:#ED5555;--orange-light:#fdf0ea;--teal:#2A7F8F;--teal-light:#e6f4f6;--green:#2d7a3a;--green-light:#e8f5ec;--ink:#15182A;--ink2:#1e1e24;--muted:#3d3d45;--rule:rgba(0,0,0,0.24);--cream:#f5f4f1;--sidebar:248px;--topbar:60px;--card-bg:#fff;--body-bg:var(--cream);--card-shadow:0 1px 3px rgba(0,0,0,0.06);--white:#fff;--red:#b91c1c;--red-light:#fef2f2;--amber:#92400e;--amber-light:#fffbeb;--error:#dc2626;--on-brand:#fff}

/* --on-brand = text color on full-strength brand fills that go LIGHT in dark
   mode: --blue #8AA0FF / --teal #5cc4d4 / --green #5cb85c (declared in the
   dark blocks below) and --brand-coral #ED5555 (unchanged in dark; white on it
   is 3.49:1). White text on the first three measures 2.2-2.5:1 in dark; navy
   #0A1A4A measures 4.8-8.2:1 on all four. Call sites use
   color:var(--on-brand,#fff). Same decision as d552 #6 and tokens.css
   --color-text-on-brand. NOT for --brand-navy fills: this file's :root wins
   the cascade over the tokens.css dark remap (equal specificity, later
   source), so --brand-navy stays #0A1A4A in dark mode and those fills keep
   plain color:#fff (white on navy = 17:1). */
[data-theme="dark"]{--blue:#8AA0FF;--blue-light:rgba(91,124,255,0.12);--blue-mid:rgba(91,124,255,0.2);--orange:#f0864a;--orange-light:rgba(240,134,74,0.12);--teal:#5cc4d4;--teal-light:rgba(92,196,212,0.1);--green:#5cb85c;--green-light:rgba(92,184,92,0.12);--ink:#e8e8ec;--ink2:#c8c8d0;--muted:#9999a8;--rule:rgba(255,255,255,0.12);--cream:#1a1a2e;--card-bg:#252538;--body-bg:#12121e;--card-shadow:0 1px 4px rgba(0,0,0,0.3);--white:#252538;--text-primary:#F0F0F4;--text-secondary:#C9C9D2;--text-tertiary:#A6A6B4;--text-muted:#A6A1AC;--surface-page:#12121e;--surface-card:#252538;--surface-card-alt:#2D2D42;--surface-hover:#33334A;--red:#F5867E;--red-light:#3A2830;--amber:#F5B759;--amber-light:#3A2E1E;--error:#F5867E;--on-brand:#0A1A4A}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--blue:#8AA0FF;--blue-light:rgba(91,124,255,0.12);--blue-mid:rgba(91,124,255,0.2);--orange:#f0864a;--orange-light:rgba(240,134,74,0.12);--teal:#5cc4d4;--teal-light:rgba(92,196,212,0.1);--green:#5cb85c;--green-light:rgba(92,184,92,0.12);--ink:#e8e8ec;--ink2:#c8c8d0;--muted:#9999a8;--rule:rgba(255,255,255,0.12);--cream:#1a1a2e;--card-bg:#252538;--body-bg:#12121e;--card-shadow:0 1px 4px rgba(0,0,0,0.3);--white:#252538;--text-primary:#F0F0F4;--text-secondary:#C9C9D2;--text-tertiary:#A6A6B4;--text-muted:#A6A1AC;--surface-page:#12121e;--surface-card:#252538;--surface-card-alt:#2D2D42;--surface-hover:#33334A;--red:#F5867E;--red-light:#3A2830;--amber:#F5B759;--amber-light:#3A2E1E;--error:#F5867E;--on-brand:#0A1A4A}
}

/* d552 dark-mode decision #6 (founder call 2026-07-13, option a): coral-filled
   controls flip to navy text in dark mode. NOTE (measured 2026-07-13, on-brand
   sweep): on app pages --brand-coral stays #ED5555 in dark mode too — this
   file's :root beats the tokens.css dark remap (#FF9466) in the cascade. The
   fix direction still holds: white on #ED5555 = 3.49:1 (fails AA), navy
   #0A1A4A = 4.78:1 (passes). Light mode untouched. Selector list = every
   background:var(--brand-coral)+color:#fff combo found in the 2026-07-13
   sweep; keep in sync if new coral fills ship. Newer call sites use
   color:var(--on-brand,#fff) instead (see comment above the dark block). */
[data-theme="dark"] .ce-cluster-seg.is-selected,
[data-theme="dark"] .ce-major-rank--top,
[data-theme="dark"] .ce-progress-step--current .ce-progress-marker,
[data-theme="dark"] .essay-fchip.active,
[data-theme="dark"] .nav-count.is-urgent,
[data-theme="dark"] .rm-m-today-cta,
[data-theme="dark"] .rm-m-week-dot.is-today,
[data-theme="dark"] .rm-wall-cta,
[data-theme="dark"] .sg-action,
[data-theme="dark"] .sg-context-strip.is-urgent .sg-context-strip-icon,
[data-theme="dark"] .sg-input-send,
[data-theme="dark"] .sg-tier-badge--premier{ color:#0A1A4A !important; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ce-cluster-seg.is-selected,
  :root:not([data-theme="light"]) .ce-major-rank--top,
  :root:not([data-theme="light"]) .ce-progress-step--current .ce-progress-marker,
  :root:not([data-theme="light"]) .essay-fchip.active,
  :root:not([data-theme="light"]) .nav-count.is-urgent,
  :root:not([data-theme="light"]) .rm-m-today-cta,
  :root:not([data-theme="light"]) .rm-m-week-dot.is-today,
  :root:not([data-theme="light"]) .rm-wall-cta,
  :root:not([data-theme="light"]) .sg-action,
  :root:not([data-theme="light"]) .sg-context-strip.is-urgent .sg-context-strip-icon,
  :root:not([data-theme="light"]) .sg-input-send,
  :root:not([data-theme="light"]) .sg-tier-badge--premier{ color:#0A1A4A !important; }
}