/* ==========================================================================
   theme.css — the ONE colour + font source for the Admin panel
   --------------------------------------------------------------------------
   Every colour in styles.css and in the screens' inline styles resolves to a
   custom property defined here. To rebrand the panel, edit the values in this
   file only; do not add hex values anywhere else.

   Loaded by index.html BEFORE styles.css.

   Naming rules (the names are load-bearing — every screen uses them):
     · --bg-*    surfaces, from the page backdrop (0) to the most recessed (4)
     · --ink-*   text, from strongest (0) to faintest (4)
     · --line-*  hairlines / borders
     · status colours come in three strengths:
         --red / --amber / --green / --blue / --violet / --pink
             TEXT weight; dark enough for 4.5:1 on white
         --*-solid   saturated fill for bars, dots, badges (never small text)
         --*-bg      faint tint behind a status label
     · --primary     main action colour (primary buttons, active nav pill)
     · --accent      links, focus rings, selected states. Users can retint it
                     at runtime from the Tweaks panel.
     · --chart-1..8  categorical series palette for charts / question colours

   The app does not ship a dark mode, so there is no [data-theme="dark"] block.
   ========================================================================== */

:root {
  /* ---- Fonts: system stacks only, nothing downloaded ---- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: var(--font-sans);           /* page titles */
  --font-serif: ui-serif, Georgia, "Times New Roman", serif;  /* printed papers only */
  --font-hand: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; /* simulated handwriting previews */

  /* ---- Surfaces ---- */
  --bg-0: #f3f4f6;   /* page backdrop */
  --bg-1: #ffffff;   /* card */
  --bg-2: #f9fafb;   /* inset tile inside a card */
  --bg-3: #f3f4f6;   /* track / recessed */
  --bg-4: #e5e7eb;   /* deepest inset, scrollbar thumb */
  --surface: #ffffff;        /* opaque panel / popover / input surface */
  --paper: #f8f7f4;          /* scanned answer sheets & paper previews */
  --paper-ink: #1f2937;
  --overlay: rgba(17, 24, 39, 0.45);  /* modal scrim */

  /* ---- Lines ---- */
  --line: #e5e7eb;
  --line-soft: #f0f1f3;
  --line-strong: #e1e3e8;

  /* ---- Ink ---- */
  --ink-0: #111827;
  --ink-1: #1f2937;
  --ink-2: #4b5563;
  --ink-3: #6b7280;
  --ink-4: #9ca3af;
  --on-solid: #ffffff;       /* text/icons on a filled solid or dark surface */

  /* ---- Primary (neutral by default) ---- */
  --primary: #111827;
  --primary-hover: #374151;
  --primary-ink: #ffffff;
  /* Legacy names kept because many rules use them. */
  --ink-btn: var(--primary);
  --ink-btn-hover: var(--primary-hover);

  /* ---- Accent ---- */
  --accent: #374151;
  --accent-ink: #ffffff;
  --accent-bg: color-mix(in srgb, var(--accent) 9%, transparent);
  --accent-2: #4b5563;

  /* ---- Status: solid fills ---- */
  --green-solid:  #16a34a;
  --blue-solid:   #2563eb;
  --amber-solid:  #d97706;
  --red-solid:    #dc2626;
  --violet-solid: #7c3aed;
  --pink-solid:   #db2777;
  --grey-solid:   #d1d5db;

  /* ---- Status: text weights ---- */
  --green:  #15803d;
  --blue:   #1d4ed8;
  --amber:  #b45309;
  --red:    #b91c1c;
  --violet: #6d28d9;
  --pink:   #be185d;

  /* ---- Status: faint tints ---- */
  --green-bg:  color-mix(in srgb, var(--green-solid) 12%, transparent);
  --green-soft: var(--green-bg);
  --green-dim: color-mix(in srgb, var(--green-solid) 30%, white);
  --blue-bg:   color-mix(in srgb, var(--blue-solid) 12%, transparent);
  --amber-bg:  color-mix(in srgb, var(--amber-solid) 14%, transparent);
  --amber-dim: color-mix(in srgb, var(--amber-solid) 30%, white);
  --red-bg:    color-mix(in srgb, var(--red-solid) 12%, transparent);
  --violet-bg: color-mix(in srgb, var(--violet-solid) 12%, transparent);
  --pink-bg:   color-mix(in srgb, var(--pink-solid) 12%, transparent);

  /* Semantic aliases for new code. */
  --danger: var(--red);   --danger-solid: var(--red-solid);
  --warning: var(--amber); --warning-solid: var(--amber-solid);
  --success: var(--green); --success-solid: var(--green-solid);
  --info: var(--blue);    --info-solid: var(--blue-solid);
  --text: var(--ink-1);
  --border: var(--line);

  /* ---- Chart series ---- */
  --chart-1: #2563eb;
  --chart-2: #16a34a;
  --chart-3: #db2777;
  --chart-4: #7c3aed;
  --chart-5: #d97706;
  --chart-6: #dc2626;
  --chart-7: #0891b2;
  --chart-8: #a21caf;

  /* ---- Shape & elevation ---- */
  --radius-card: 24px;
  --radius-tile: 16px;
  --shadow-card: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-float: 0 1px 3px rgba(17, 24, 39, 0.08);
  --shadow-pop: 0 12px 32px rgba(17, 24, 39, 0.14);

  /* ---- Device insets (not colours, but global tokens) ----
     --cx-sat is the device's top safe-area inset behind a variable so it can
     be overridden for testing. --cx-island-lift pulls the scrolled nav row
     up into that inset (0 = stay clear of the status bar). */
  --cx-sat: env(safe-area-inset-top, 0px);
  --cx-island-lift: 0px;
}