/* ============================================================
   BARAEM GRADEFLOW — THEME

   One source of truth for colour, type, space and motion.

   The palette is academic rather than product-y: a deep Baraem green carries
   the identity, slate neutrals do the work, and gold is an ACCENT — used on
   rules, the active indicator and one or two figures — never as a fill.

   Dark mode is a designed theme, not an inversion. Every surface, border and
   text value is chosen against the dark background so contrast holds.

   Semantic colour is reserved for meaning: green = pass / up, red = fail /
   down, amber = warning, slate = no data. A card is never coloured for
   decoration.
   ============================================================ */

:root {
  /* ---------- Brand: Baraem green ---------- */
  --bg-green-900: #06251a;
  --bg-green-800: #0a3325;
  --bg-green-700: #0e4231;
  --bg-green-600: #13533e;
  --bg-green-500: #1a674d;
  --bg-green-400: #2a8262;
  --bg-green-300: #4da583;
  --bg-green-200: #8bc7ae;
  --bg-green-100: #c9e6da;
  --bg-green-50:  #eaf5f0;

  /* ---------- Gold: accent only ---------- */
  --gold-700: #8a6412;
  --gold-600: #a87c1c;
  --gold-500: #c99a30;
  --gold-400: #dcb558;
  --gold-200: #f0dda4;
  --gold-100: #f9efd6;

  /* ---------- Slate neutrals ---------- */
  --sl-900: #10161b;
  --sl-800: #1a222a;
  --sl-700: #263039;
  --sl-600: #35414c;
  --sl-500: #4d5a66;
  --sl-400: #6b7885;
  --sl-300: #94a0ab;
  --sl-200: #c3cad2;
  --sl-150: #d5dbe1;
  --sl-100: #e5eaef;
  --sl-50:  #f1f4f7;
  --sl-25:  #f8fafb;
  --white: #ffffff;

  /* ---------- Semantic (meaning, never decoration) ---------- */
  --ok-700: #14603a;  --ok-600: #1a7a4a;  --ok-100: #dcf0e5;
  --warn-700: #8a5a06; --warn-600: #a8700a; --warn-100: #fbeed2;
  --bad-700: #9f2019;  --bad-600: #bd2c22;  --bad-100: #fbe3e1;
  --info-700: #14506e; --info-600: #1a6a91; --info-100: #dcecf5;

  /* ---------- Surfaces ---------- */
  --bg:          #eef1f4;
  --bg-deep:     #e4e9ed;
  --surface:     #ffffff;
  --surface-2:   var(--sl-25);
  --surface-3:   var(--sl-50);
  --surface-sunk:var(--sl-100);
  --border:      var(--sl-150);
  --border-soft: var(--sl-100);
  --border-strong: var(--sl-300);

  /* ---------- Ink ---------- */
  --text:      var(--sl-900);
  --text-soft: var(--sl-600);
  --text-faint:var(--sl-500);
  --text-mute: var(--sl-400);
  --text-on-brand: #ffffff;

  /* ---------- Interactive ---------- */
  --accent:      var(--bg-green-600);
  --accent-hover:var(--bg-green-700);
  --accent-soft: var(--bg-green-50);
  --accent-ink:  var(--bg-green-800);
  --focus:       var(--bg-green-500);

  /* ---------- Elevation: quiet, not floaty ---------- */
  --sh-1: 0 1px 2px rgba(16,22,27,.05);
  --sh-2: 0 1px 3px rgba(16,22,27,.07), 0 1px 2px rgba(16,22,27,.04);
  --sh-3: 0 4px 12px rgba(16,22,27,.08), 0 1px 3px rgba(16,22,27,.05);
  --sh-4: 0 12px 32px rgba(16,22,27,.12), 0 2px 8px rgba(16,22,27,.06);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.6);

  /* ---------- Radius: restrained ---------- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---------- Type ---------- */
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-num: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-ar: "Segoe UI", "Noto Sans Arabic", "Dubai", "Tahoma", system-ui, sans-serif;
  --font-read: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --t-10: 10px;  --t-11: 11px;  --t-12: 12px;  --t-13: 13px;  --t-14: 14px;
  --t-15: 15px;  --t-16: 16px;  --t-18: 18px;  --t-20: 20px;
  --t-24: 24px;  --t-30: 30px;  --t-38: 38px;  --t-48: 48px;

  --lh-tight: 1.25;
  --lh-snug:  1.4;
  --lh-body:  1.6;
  --lh-loose: 1.75;

  /* ---------- Space (4px base) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 64px;

  /* ---------- Motion: subtle, and always reduced when asked ---------- */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --t-slower: 520ms;
  --ease: cubic-bezier(.32, .72, .32, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --sidebar-w: 252px;
  --topbar-h: 62px;
  --content-max: 1560px;

  color-scheme: light;
  /* ---------- Grade bands: meaning, not decoration ---------- */
  --chart-b-ap: #1F8A5B;  --chart-b-a: #4CA64C;  --chart-b-b: #D4A017;
  --chart-b-c:  #E07B39;  --chart-b-d: #C0392B;  --chart-b-e: #7A8290;
  --chart-mute: #7A879E;
}

/* ============================================================
   DARK ACADEMIC THEME
   Not an inversion: the green is lifted for contrast on dark, the slate ramp is
   re-picked, and gold is dimmed so it does not glow.
   ============================================================ */
:root[data-theme="dark"] {
  --bg:          #0d1317;
  --bg-deep:     #090d10;
  --surface:     #151d23;
  --surface-2:   #1a242b;
  --surface-3:   #1f2a32;
  --surface-sunk:#111a20;
  --border:      #2a3740;
  --border-soft: #222d35;
  --border-strong: #3a4a55;

  --text:      #e8edf1;
  --text-soft: #a3b0bb;
  --text-faint:#8494a1;
  --text-mute: #6b7c89;
  --text-on-brand: #eafff6;

  --accent:      var(--bg-green-400);
  --accent-hover:var(--bg-green-300);
  --accent-soft: rgba(42,130,98,.16);
  --accent-ink:  var(--bg-green-200);
  --focus:       var(--bg-green-300);

  /* A translucent wash is a LIGHT-mode device: it only reads because a pale
     chip sits on white. On charcoal it produces a chip barely lighter than the
     card, so light ink measured 1.7:1 against it and every status badge read as
     an unreadable smudge. Dark washes are OPAQUE, mixed from the same hue, so
     the chip is visibly distinct from the surface behind it. */
  --ok-700:  #6fceA0;  --ok-600:  #4fb681;  --ok-100:  #12281d;
  --warn-700:#e8bb6a;  --warn-600:#d3a047;  --warn-100:#2c2311;
  --bad-700: #ef8a80;  --bad-600: #d96155;  --bad-100: #2d1715;
  --info-700:#7fc0e0;  --info-600:#4d9fc4;  --info-100:#10222c;

  --gold-500: #c9a544;
  --gold-400: #d8b862;

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --sh-3: 0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35);
  --sh-4: 0 16px 40px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.4);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.04);

  --font-read: "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  color-scheme: dark;
}

/* ============================================================
   NUMERIC TYPOGRAPHY
   Figures in this product are tabular, LTR and never re-ordered by an RTL
   paragraph. "80.1%" must not render as "%1.08".
   ============================================================ */
.num, .tnum, [data-num] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

/* ============================================================
   CHART TOKENS
   ------------------------------------------------------------
   charts.js paints SVG with var(--ch-*). These were previously scoped to
   .an-wrap only, so any chart rendered outside that wrapper resolved every
   variable to nothing and painted solid black bars on an empty axis. They are
   defined globally here and remapped onto the Baraem palette, which also means
   a dark theme retints the charts without touching the drawing code.
   ============================================================ */
:root {
  --ch-card:   var(--surface);
  --ch-text:   var(--text);
  --ch-muted:  var(--text-faint);
  --ch-grid:   var(--border);
  --ch-accent: var(--accent);
  --ch-a1:     var(--bg-green-600);
  --ch-a2:     var(--bg-green-400);
  --ch-a3:     var(--gold-600);
  --ch-a4:     var(--sl-400);
  --ch-ok:     var(--ok-600);
  --ch-bad:    var(--bad-600);
}

/* ============================================================
   FOCUS — visible, consistent, keyboard only
   ============================================================ */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:where(button, a, input, select, textarea):focus:not(:focus-visible) { outline: none; }

/* ============================================================
   SCROLLBARS — quiet
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-mute); background-clip: content-box; }

/* ============================================================
   REDUCED MOTION
   The system preference wins over every animation in this application.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
:root[data-motion="calm"] *,
:root[data-motion="calm"] *::before,
:root[data-motion="calm"] *::after {
  animation-duration: .01ms !important;
  transition-duration: 60ms !important;
}