/* ================================
   DESIGN TOKENS
   --------------------------------
   Global CSS variables. Several stylesheets (atp.css, poa.css,
   components.css, …) reference these; until this block existed they were
   undefined and every declaration using them was silently dropped by the
   browser (missing borders, invisible checkboxes, washed-out cards).
   Different files grew different naming families over time — the aliases
   at the bottom keep them all resolving to the same palette.
   A future dark mode overrides this block only.
================================ */

:root {
    /* Brand / semantic colours */
    --primary:      #1e3a8a;
    --accent:       #2563eb;
    --success:      #16a34a;
    --warning:      #d97706;
    --danger:       #dc2626;

    /* Text */
    --text:         #1f2933;
    --text-primary: #1f2933;
    --text-muted:   #6b7280;
    --muted:        #6b7280;

    /* Borders */
    --border:       #e5e7eb;   /* hairlines, card outlines, row separators */
    --border-color: #d0d5dd;   /* form inputs (slightly darker) */

    /* Fixed white — for text sitting on a solid colour (buttons, badges,
       active tabs, sidebar). Deliberately NOT overridden in dark mode:
       --white below is repurposed there to mean "the darkest neutral
       surface", so anything needing literal white text must use this
       instead (using --white for that purpose is how the dark-mode pass
       turned button/badge text unreadable — near-black text on a still-
       colourful button background). */
    --text-inverse: #ffffff;

    /* Fixed dark — for text sitting on a FIXED light tint that doesn't flip
       with the theme (e.g. the timetable's pastel subject-colour cells).
       Counterpart of --text-inverse; also never overridden in dark mode. */
    --text-on-tint: #1f2933;

    /* Surfaces / backgrounds */
    --white:        #ffffff;
    --surface:      #ffffff;
    --surface-2:    #f8fafc;
    --card-bg:      #ffffff;
    --bg:           #f8fafc;   /* subtle panel / hover backgrounds */
    --bg-subtle:    #f3f4f6;
    --bg-muted:     #f3f4f6;
    --overlay:      rgba(15, 23, 42, 0.45);  /* modal ::backdrop dim */

    /* Tint backgrounds (pair with the semantic colours — pills, chips, banners) */
    --success-bg:   #e7f6ec;
    --warning-bg:   #fef3c7;
    --danger-bg:    #fdecec;
    --danger-border: #f5c6c6;  /* danger-zone card outlines */

    /* On-tint text + tint borders (dark text/edges that sit ON the tint bgs) */
    --success-text:  #065f46;
    --warning-text:  #92400e;
    --danger-text:   #991b1b;
    --success-border: #4ade80;
    --warning-border: #fbbf24;
    --danger-border-strong: #f87171;

    /* Info family (indigo — e.g. "Retained" verdict) */
    --info-bg:       #e0e7ff;
    --info-text:     #3730a3;

    /* Light text tier below --text-muted (placeholders, disabled) */
    --text-faint:    #9ca3af;

    /* Pale primary border (chips, selected outlines) */
    --primary-border: #bfdbfe;
    --primary-bg:   #eef2fd;

    /* Warm theme tokens (used in assessments rubric builder) */
    --warm-bg-subtle: #f7f3ee;
    --warm-bg:        #faf7f2;
    --warm-card-bg:   #ffffff;
    --warm-border:    #e8e0d4;
    --warm-border-dark: #ccc4b4;
    --warm-text:      #3d2f1e;
    --warm-text-muted: #7a7060;
    --warm-text-faint: #9b8a6e;
    --warm-accent:    #7c5e2a;

    /* Fixed brand chrome (sidebar, top header band, login brand panel).
       These deliberately have NO dark-mode overrides — the navy chrome is
       the brand identity and stays navy in both themes. Overriding them to
       near-black was what made the login page one indistinguishable black
       expanse and the header a jarring bright blue in dark mode. */
    --sidebar-bg-start: #1e3a8a;
    --sidebar-bg-end:   #1e293b;
    --sidebar-color:    #ffffff;
    --sidebar-border:   rgba(255,255,255,0.1);
    --sidebar-text-muted: rgba(219, 234, 254, 0.65);
    --sidebar-active-bg: rgba(255,255,255,0.15);
    --sidebar-hover-bg:  rgba(255,255,255,0.08);
    --header-bg-start:  #1e3a8a;
    --header-bg-end:    #2563eb;

    /* Radii */
    --radius:       8px;

    /* Legacy aliases — older files use a color- prefix */
    --color-primary:    var(--primary);
    --color-border:     var(--border);
    --color-text:       var(--text);
    --color-text-muted: var(--text-muted);
    --color-bg:         var(--bg);
    --color-bg-subtle:  var(--bg-subtle);
    --color-surface:    var(--surface);
    --color-bg-card:    var(--card-bg);
    --color-bg-input:   var(--white);
}

/* ================================
   DARK THEME VARIABLES
   ================================ */

/* Dark ramp is SLATE (blue-tinted), not neutral zinc — the near-pure-black
   #09090b/#18181b first attempt read as harsh "OLED black" and clashed with
   the navy brand. Slate keeps depth separation (bg → card → muted) while
   staying warm enough to live next to #1e3a8a chrome.
   NOTE: the --sidebar-* family is deliberately NOT overridden here — the
   sidebar and the login brand panel keep their navy gradient in both themes
   (overriding them to near-black made the login page one indistinguishable
   black expanse). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary:      #3b82f6;
        --accent:       #60a5fa;
        --success:      #34d399;
        --warning:      #fbbf24;
        --danger:       #f87171;

        --text:         #e2e8f0;
        --text-primary: #e2e8f0;
        --text-muted:   #94a3b8;
        --muted:        #94a3b8;
        --text-faint:   #8494a9;

        --border:       #2c3a4f;
        --border-color: #3d4f68;

        --white:        #1e293b;
        --surface:      #1e293b;
        --surface-2:    #16202f;
        --card-bg:      #1e293b;
        --bg:           #0f172a;
        --bg-subtle:    #182338;
        --bg-muted:     #253349;
        --overlay:      rgba(0, 0, 0, 0.6);

        --success-bg:   rgba(52, 211, 153, 0.12);
        --warning-bg:   rgba(251, 191, 36, 0.12);
        --danger-bg:    rgba(248, 113, 113, 0.12);
        --danger-border: #7f2f2f;

        --success-text:  #6ee7b7;
        --warning-text:  #fcd34d;
        --danger-text:   #fca5a5;
        --success-border: #34d399;
        --warning-border: #fbbf24;
        --danger-border-strong: #f87171;

        --info-bg:       rgba(129, 140, 248, 0.12);
        --info-text:     #a5b4fc;

        --primary-border: #2f4a7d;
        --primary-bg:   rgba(96, 165, 250, 0.12);

        --warm-bg-subtle: #1b2436;
        --warm-bg:        #182031;
        --warm-card-bg:   #223049;
        --warm-border:    #34435c;
        --warm-border-dark: #465877;
        --warm-text:      #e7ecf3;
        --warm-text-muted: #9daebf;
        --warm-text-faint: #8494a9;
        --warm-accent:    #d3ddea;
    }
}

/* Keep in sync with the prefers-color-scheme block above — this is the
   explicit-toggle variant of the same palette. */
html[data-theme="dark"] {
    --primary:      #3b82f6;
    --accent:       #60a5fa;
    --success:      #34d399;
    --warning:      #fbbf24;
    --danger:       #f87171;

    --text:         #e2e8f0;
    --text-primary: #e2e8f0;
    --text-muted:   #94a3b8;
    --muted:        #94a3b8;
    --text-faint:   #8494a9;

    --border:       #2c3a4f;
    --border-color: #3d4f68;

    --white:        #1e293b;
    --surface:      #1e293b;
    --surface-2:    #16202f;
    --card-bg:      #1e293b;
    --bg:           #0f172a;
    --bg-subtle:    #182338;
    --bg-muted:     #253349;
    --overlay:      rgba(0, 0, 0, 0.6);

    --success-bg:   rgba(52, 211, 153, 0.12);
    --warning-bg:   rgba(251, 191, 36, 0.12);
    --danger-bg:    rgba(248, 113, 113, 0.12);
    --danger-border: #7f2f2f;

    --success-text:  #6ee7b7;
    --warning-text:  #fcd34d;
    --danger-text:   #fca5a5;
    --success-border: #34d399;
    --warning-border: #fbbf24;
    --danger-border-strong: #f87171;

    --info-bg:       rgba(129, 140, 248, 0.12);
    --info-text:     #a5b4fc;

    --primary-border: #2f4a7d;
    --primary-bg:   rgba(96, 165, 250, 0.12);

    --warm-bg-subtle: #1b2436;
    --warm-bg:        #182031;
    --warm-card-bg:   #223049;
    --warm-border:    #34435c;
    --warm-border-dark: #465877;
    --warm-text:      #e7ecf3;
    --warm-text-muted: #9daebf;
    --warm-text-faint: #8494a9;
    --warm-accent:    #d3ddea;
}

/* ================================
   RESET & BASE
================================ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text);
}

/* Default anchor colour — never defined until 2026-07-19, so bare <a>s fell
   back to the browser's own blue/purple, unreadable on dark surfaces (class
   names on Classes, subject titles on the ATP dashboard, inline body links).
   Components that set their own link colour override this by specificity. */
a {
    color: var(--primary);
}

/* ── RooiPen wordmark ─────────────────────────────────────────────────────
   Great Vibes script, two-tone: "Rooi" inherits the surrounding colour,
   "Pen" is brand red (#C0392B). Used in the sidebar header + auth pages.
   The script flourish replaces the old hand-drawn underline. */
.rp-brand {
    font-family: 'Great Vibes', cursive;
    font-weight: 400;
    letter-spacing: 0.01em;
    position: relative;
    display: inline-block;
    line-height: 1.05;
    white-space: nowrap;
    /* Great Vibes runs small for its point size — scale up vs the old wordmark. */
    font-size: 1.7em;
}
.rp-brand .rp-pen { color: #C0392B; }
/* Old hand-drawn underline retired — keep the hook hidden if any cache serves it. */
.rp-brand .rp-underline { display: none; }
.rp-brand-h { font-weight: 400; }

/* Wordmark lockup: stacked wordmark + hairline rule + optional tagline. */
.rp-lockup {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}
.rp-rule {
    height: 1.5px;
    width: 78%;
    background: #C0392B;
    border-radius: 1px;
    margin-top: 1px;
}
.rp-tagline {
    margin-top: 7px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #C0392B;
}