/* Design tokens (Plan W). The ONLY file allowed raw colour values.
   Light values in :root, dark overrides in [data-theme="dark"].
   Change a value here and every migrated page follows, in both themes. */
:root {
    /* Brand */
    --color-brand: #970421;
    --color-brand-hover: #7a0319;
    --color-brand-bright: #b3122f;            /* lighter end of brand gradients */
    --color-on-brand: #ffffff;
    --color-accent-text: #970421;             /* brand-coloured TEXT (links, kickers) */
    --color-accent-soft: rgba(151, 4, 33, 0.08);
    /* Logo (components/logo.html): follows the brand text colour, so it turns
       pink in dark mode with the headings; the detail is cut out of the mark */
    --logo-fill: var(--color-accent-text);
    --logo-detail: var(--color-on-brand);
    --logo-ink: var(--text-primary);           /* the student figure: dark on light, light on dark */

    /* Surfaces */
    --surface-page: #faf4ec;
    --surface-card: #ffffff;
    --surface-subtle: #f3ece1;
    --surface-input: #ffffff;
    --surface-nav: #ffffff;
    --surface-hover: rgba(0, 0, 0, 0.05);

    /* Text */
    --text-primary: #1a1a1a;
    --text-secondary: #666666;                /* 5.25:1 on page (unchanged) */
    --text-muted: #6b6560;                    /* 5.2:1; replaces the failing hardcoded #888 */

    /* Borders */
    --border-default: #e0e0e0;
    --border-strong: #cfc6ba;

    /* Status */
    --color-success: #1a5256;
    --color-success-soft: rgba(26, 82, 86, 0.12);
    --color-warning: #856404;
    --color-warning-soft: rgba(133, 100, 4, 0.12);
    --color-danger: #b42318;
    --color-danger-soft: rgba(180, 35, 24, 0.1);
    --color-gold: #d9a13d;                    /* decorative fills only, never text */
    /* Categorical accents (stat icons, charts): blue and indigo */
    --color-info: #1d4ed8;
    --color-info-soft: #dbeafe;
    --color-indigo: #4338ca;
    --color-indigo-soft: #e0e7ff;

    /* Space, shape, depth, type */
    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
    --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.08);
    --font-display: 'Bricolage Grotesque', Georgia, serif;
    --font-body: 'Hanken Grotesk', Arial, sans-serif;
    --focus-ring: 0 0 0 3px rgba(151, 4, 33, 0.35);

    /* Always-dark surfaces (footer) look the same in both themes, so their
       text tokens are fixed rather than following the page theme. */
    --surface-inverse: #1a1a1a;
    --surface-inverse-deep: #111111;
    --text-on-inverse: #f0f0f0;
    --text-on-inverse-muted: #b3b3b3;
    --accent-on-inverse: #ff4560;             /* brighter brand red, readable on the dark footer: 5.2:1 */

    /* Dimmed page behind dialogs */
    --surface-overlay: rgba(0, 0, 0, 0.5);

    /* Solid fills that carry white (--color-on-brand) text. They stay the same
       in dark mode: the status text colours lighten there and would fail
       under white text. */
    --fill-success: #1a5256;
    --fill-success-hover: #123e41;
    --fill-danger: #b42318;
    --fill-danger-hover: #8f1c13;
    --fill-neutral: #6c757d;
    --condition-excellent: #1a5256;
    --condition-good: #7d6b31;
    --condition-fair: #b8425a;

    /* Warm editorial palette: landing and home (.lp-*) and the auth art */
    --lp-maroon: #970421;
    --lp-maroon-light: #b81731;
    --lp-maroon-deep: #6d0317;
    --lp-teal: #1a5256;
    --lp-teal-light: #2b8a82;
    --lp-teal-mid: #1f6066;
    --lp-teal-deep: #123e41;
    --lp-gold: #d39433;
    --lp-gold-light: #e7b35a;
    --lp-coral: #b8425a;
    --lp-cream: #faf4ec;
    --lp-card: #ffffff;
    --lp-pill: #ffffff;
    --lp-ink: #2a1418;
    --lp-sticker-ink: #2a1418;                /* sits on gold in both themes */
    --lp-photo-from: #efe7da;
    --lp-photo-to: #ddcfb9;
    --lp-photo-ink: #b5a98e;

    /* Request noticeboard: cork board and paper notes */
    --board-bg: var(--surface-subtle);
    --board-border: var(--border-default);
    --board-note: #fffdf6;
    --board-note-border: var(--border-default);
    --board-pin-light: #ff7a7a;
    --board-pin: #c0392b;
    --board-backdrop: #14100c;
}

[data-theme="dark"] {
    --surface-overlay: rgba(0, 0, 0, 0.65);
    /* The brand red brightened for dark backgrounds: the closest red that stays
       readable (5.5:1 page, 5.0:1 card, 4.6:1 on subtle panels). Chosen by the
       owner on 2026-10-03 over the original #970421 (about 2:1) and the earlier
       pink #f06b82. The tint stays faint so red text on it still passes. */
    --color-accent-text: #ff4560;
    --color-accent-soft: rgba(255, 69, 96, 0.08);
    --surface-page: #141414;
    --surface-card: #1e1e1e;
    --surface-subtle: #252525;
    --surface-input: #2a2a2a;
    --surface-nav: #1a1a1a;
    --surface-hover: rgba(255, 255, 255, 0.05);
    --text-primary: #f0f0f0;
    --text-secondary: #aaaaaa;
    --text-muted: #9a9a9a;
    --border-default: #444444;
    --border-strong: #555555;
    --color-success: #5eb7bd;
    --color-success-soft: rgba(94, 183, 189, 0.15);
    --color-warning: #e0b44c;
    --color-warning-soft: rgba(224, 180, 76, 0.15);
    --color-danger: #f28b82;
    --color-danger-soft: rgba(242, 139, 130, 0.15);
    --color-info: #60a5fa;
    --color-info-soft: rgba(96, 165, 250, 0.15);
    --color-indigo: #a5b4fc;                   /* lighter than the light-theme hue so badge text on its tint passes 4.5:1 */
    --color-indigo-soft: rgba(129, 140, 248, 0.15);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.4);
    --focus-ring: 0 0 0 3px rgba(255, 69, 96, 0.5);

    --lp-cream: #17120f;
    --lp-card: #241c17;
    --lp-pill: #2b211b;
    --lp-ink: #f3e9df;
    --lp-photo-from: #3a3326;
    --lp-photo-to: #2a2419;

    --board-bg: #1c1813;
    --board-border: #322a20;
    --board-note: #2a241c;
    --board-note-border: #3a3226;
}