/* Early to CXC — brand tokens (derived from the logo) + public-page base.
   MudBlazor authenticated areas are themed via BrandTheme.cs; these variables drive the
   Bootstrap-based public pages and any custom CSS. */

:root {
  --brand-orange: #F39125;
  --brand-orange-deep: #E36A1A;
  --brand-blue: #1F5A8A;
  --brand-blue-deep: #163E63;
  --brand-blue-pale: #E6F0F8;
  --brand-green: #6FAE3F;
  /* Orange AS TEXT. --brand-orange(-deep) are fills; as small text on light surfaces they are
     2.36:1 / 3.31:1 (WCAG 1.4.3 needs 4.5). This is the darkest orange that still reads as the
     brand: 5.0:1 on white, 4.7:1 on paper. Dark mode brightens it instead (9.9:1). */
  --brand-orange-text: #B4530A;

  --ink-900: #0F1B2D;
  --ink-700: #2A3A52;
  --ink-500: #5A6B82;
  --ink-300: #9AA8BC;
  --ink-100: #D9E0EA;
  --paper: #FAF6EE;
  --paper-warm: #F5EFE3;
  --white: #FFFFFF;

  /* Bootstrap overrides so public pages adopt the brand */
  --bs-primary: #F39125;
  --bs-primary-rgb: 243, 145, 37;
  --bs-link-color: #1F5A8A;
  --bs-link-hover-color: #163E63;
  --bs-body-color: #0F1B2D;
  --bs-body-bg: #FAF6EE;
  --bs-font-sans-serif: 'Roboto', system-ui, -apple-system, sans-serif;
}

/* Tabular numerals utility (prices, references) */
.tnum { font-variant-numeric: tabular-nums; }

/* Brand button helpers for public (Bootstrap) pages */
/* WCAG 1.4.3 — ink text on brand orange (7.3:1); white was 2.36:1. Fixed literal, not var(--ink-900), because the orange never changes between themes so the text must not either. */
.btn-brand {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: #0F1B2D;
  font-weight: 600;
}
.btn-brand:hover,
.btn-brand:focus {
  background: var(--brand-orange-deep);
  border-color: var(--brand-orange-text, #B4530A);
  color: #0F1B2D;
}
.text-brand { color: var(--brand-orange-text, #B4530A); }
.bg-brand-blue { background: var(--brand-blue-deep); }

/* Never allow horizontal page scroll (off-canvas drawers/FABs must not widen the page). */
html, body { overflow-x: hidden; max-width: 100%; }

/* ── Semantic surface tokens — components should theme via these ─── */
:root {
  --surface: #FFFFFF;        /* cards, panels */
  --surface-2: #FAF6EE;      /* page / muted surface */
  --border: rgba(15, 27, 45, 0.18);          /* darkened for clearer outlines (WCAG 1.4.11) */
  --border-strong: rgba(15, 27, 45, 0.50); /* 3.4:1 on white — this tier is for boundaries that carry meaning (1.4.11); --border stays lighter for decoration */
  --text: #0F1B2D;
  --text-muted: #46566B; /* WCAG 1.4.3 — raised to ≥4.5:1 on light surfaces */
  --shadow: rgba(15, 27, 45, 0.10);
  /* Darker MudBlazor input outlines + dividers so form fields read clearly. */
  --mud-palette-lines-inputs: rgba(15, 27, 45, 0.52); /* 3.5:1 on white — 0.42 computed 2.66:1, under 1.4.11's 3:1 */
  --mud-palette-lines-default: rgba(15, 27, 45, 0.18);
  /* Darker Bootstrap border (light mode) — public pages use it for cards, inputs, dividers
     and tables; the default #dee2e6 is too faint (WCAG 1.4.11). */
  --bs-border-color: rgba(15, 27, 45, 0.22);
}

/* ── Dark mode ───────────────────────────────────────────────────
   Flips the existing brand tokens (so any component already using
   var(--ink-*)/var(--paper)/etc. goes dark for free) + the semantic + Bootstrap vars. */
html[data-theme="dark"] {
  --ink-900: #F6F1E5;
  --ink-700: rgba(246, 241, 229, 0.82);
  --ink-500: rgba(246, 241, 229, 0.60);
  --ink-300: rgba(246, 241, 229, 0.42);
  --ink-100: rgba(255, 255, 255, 0.14);
  --paper: #0B1525;
  --paper-warm: #0F1B2D;
  --brand-blue-pale: rgba(31, 90, 138, 0.22);
  --brand-orange-text: #F3B25C;

  --surface: #142238;
  --surface-2: #0F1B2D;
  --border: rgba(255, 255, 255, 0.22);          /* darkened (lightened) for clearer outlines on dark */
  --border-strong: rgba(255, 255, 255, 0.38);
  --text: #F6F1E5;
  --text-muted: #C9C2B4; /* WCAG 1.4.3 — solid, ≥4.5:1 on dark surfaces */
  --shadow: rgba(0, 0, 0, 0.45);
  /* Stronger MudBlazor input outlines + dividers on dark surfaces. */
  --mud-palette-lines-inputs: rgba(255, 255, 255, 0.42);
  --mud-palette-lines-default: rgba(255, 255, 255, 0.22);

  --bs-body-bg: #0B1525;
  --bs-body-color: #F6F1E5;
  --bs-secondary-color: rgba(246, 241, 229, 0.70);
  --bs-border-color: rgba(255, 255, 255, 0.12);
  --bs-tertiary-bg: #142238;
  color-scheme: dark;
}

html[data-theme="dark"] body { background: var(--paper); color: var(--text); }

/* ── StatCard shell (global, intentionally unscoped) ─────────────────────────────
   StatCard renders a <MudPaper Class="e2c-statcard"> as its root. Blazor CSS isolation
   does NOT put the component's scope attribute on a child-component root, so the scoped
   `.e2c-statcard { padding }` in StatCard.razor.css never matches (cards rendered flush,
   padding:0). `.e2c-statcard` is only ever this MudPaper, so a global rule is safe and
   restores the intended card shell everywhere it's used. */
.e2c-statcard { padding: 20px; border-radius: 12px; height: 100%; }


/* Quiz manager "← All quizzes" back button (MudButton in PortalTopBar — no CSS-isolation scope,
   so it must be a plain global rule; the scoped :global() version compiled invalid and was dropped).
   WCAG 1.4.3: light #163E63 on white ~10.4:1; dark #8EC2F0 on --surface #142238 ~8.5:1. */
.qz-back-btn { color: #163E63 !important; font-weight: 600; text-transform: none; }
.qz-back-btn:hover, .qz-back-btn:focus-visible { background: rgba(22, 62, 99, .08) !important; }
html[data-theme="dark"] .qz-back-btn { color: #8EC2F0 !important; }
html[data-theme="dark"] .qz-back-btn:hover,
html[data-theme="dark"] .qz-back-btn:focus-visible { background: rgba(142, 194, 240, .16) !important; }

/* WCAG 2.3.3 — honour the OS "reduce motion" setting everywhere at once. Individual files animate
   card lifts, panel slides and carousel transitions; a single global guard cannot be forgotten by
   the next component the way per-file @media blocks are (only Home.razor.css had one). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}