:root {
    /* Base (authoritative) */
    --bucket-complete: #00cc66;
    --bucket-incomplete: #cc3333;
    --bucket-notattempted: #30a1ec;
    --bucket-exempt: #000000;
    /* Derived surfaces (tints) */
    --bucket-complete-bg: #e6f9f0;
    --bucket-complete-border: #99e6c2;
    --bucket-incomplete-bg: #fbeaea;
    --bucket-incomplete-border: #efb3b3;
    --bucket-notattempted-bg: #e9f4fd;
    --bucket-notattempted-border: #bcdff7;
    --bucket-exempt-bg: #f0f0f0;
    --bucket-exempt-border: #d6d6d6;
    /* Extra bucket tints used in class-card progress bars. Kept identical to
       the legacy system palette so the new dashboard is colour-compatible
       with historical screenshots / documentation.
       Absent deliberately uses a distinct amber — black was too close to
       Exempt on the stacked bars. */
    --bucket-absent: #f57c00;           /* amber 800 */
    --bucket-flagged-incomplete: #cf9fff; /* legacy light purple */
    --bucket-flagged-complete: #7f00ff;   /* legacy dark purple */
    --bucket-unknown: #999999;
    --bucket-empty: #dddddd;

    /* ── Player (Light theme — default) ── */
    --player-bg: #f0f0f0;
    --player-text: #111;
    --player-subheader-bg: #333;
    --player-subheader-text: #fff;
    --player-stem-text: #0097a7;
    --player-stem-font-style: italic;
    --player-option-bg: #fff;
    --player-option-border: #444;
    --player-option-text: #111;
    /* Accent (theme-invariant) */
    --player-accent: #00bcd4;
    --player-audio-played: #f5a623;
    --player-audio-upcoming: #00bcd4;
    --player-audio-highlight: #f5a623;
    /* Bars (question bar, toolbar, audio player) */
    --player-bar-bg: #e0e0e0;
    --player-bar-border: #bbb;
    /* Buttons */
    --player-btn-active-bg: #000;
    --player-btn-active-text: #fff;
    --player-btn-outline-border: #666;
    --player-btn-outline-text: #333;

    /* ── Admin theme (Stefan, year7RE design rules) ──
       Source: docs/design/year7RE_Admin_Design_Rules.docx
       Referenced by the admin-ui-design skill. */
    --admin-font: 'Segoe UI', system-ui, sans-serif;
    --admin-charcoal: #1a1a1a;
    --admin-red: #b4241c;
    --admin-red-active: #7b1f1f;
    --admin-white: #ffffff;

    /* Column boxes */
    --admin-column-box-bg: #f5f5f5;
    --admin-column-box-border: #e0e0e0;

    /* Standardised column widths (admin pages) */
    --admin-col-schools: 320px;     /* left: schools list / org-unit picker */
    /* Classes column — Stefan v04: "set column (panel) width to 400px to avoid
       bunching up of content in the Class Detail boxes". Was floor 320 in v03,
       lifted to 400 to stop class-name text wrapping and to fit wider teacher
       chip stacks. Clamp stays so ultra-wide displays don't waste space. */
    --admin-col-classes: clamp(400px, 22%, 480px);
    --admin-col-detail: 450px;      /* right: student-detail / log panels */
    --admin-col-gutter: 24px;       /* slim collapsible gutter between columns */

    /* Staff chips */
    --admin-teacher-fill: #eeeeee;
    --admin-teacher-stroke: #dddddd;
    --admin-staff-admin-fill: #eed69b;
    --admin-staff-admin-stroke: #ddc690;

    /* Buttons */
    --admin-btn-student-list-fill: #595959;
    --admin-btn-student-list-stroke: #424242;
    --admin-btn-download-fill: #1f3f58;
    --admin-btn-download-stroke: #172d42;
    --admin-btn-download-w: 135px;             /* Stefan v04: was 120 in v03 */
    --admin-btn-schedule-fill: #0c8292;        /* Stefan v03: teal SCHEDULE */
    --admin-btn-reschedule-fill: #1a1a1a;      /* Stefan v03: black RESCHEDULE (his hex was a typo) */

    /* Button hierarchy heights (Stefan v04) — Button 1 / 2 / 3.
       B1 = icon+text, 34h. B2 = icon+text, 26h. B3 = text-only, 26h.
       All three: font 12/600, uppercase, variable width, variable fill. */
    --admin-btn1-h: 34px;
    --admin-btn2-h: 26px;
    --admin-btn3-h: 26px;

    /* User Settings rollover (Stefan v04) — applies to AUDIO ON/OFF, A+, A-,
       USER PROFILE, LOG OUT buttons. Black fill → orange fill + black text. */
    --admin-rollover-orange: #ff9f00;

    /* Activity Logs / Student Alerts MARK ALL AS READ (Stefan v04). */
    --admin-btn-mark-read-fill: #1a4f14;       /* bottle green */

    /* Alert-count badge colours (Stefan v04) — panel-heading circle badges. */
    --admin-badge-zero-bg: #1f3f58;            /* navy — no alerts/logs */
    --admin-badge-active-bg: #b4241c;          /* red — has alerts/logs */

    /* Expand/Minimise + HIDE/SHOW column toggle glyph colour (Stefan v04).
       Symbol is DARKER GREY, not charcoal — previous frame used charcoal. */
    --admin-toggle-symbol: #7c7c7c;
    --admin-toggle-fill: #f0f0f0;              /* = --admin-surface-hover */
    --admin-toggle-stroke: #d0d0d0;            /* = --admin-surface-border */
    --admin-toggle-size: 24px;

    /* Tabs + search */
    --admin-tab-baseline-color: var(--admin-charcoal);
    --admin-tab-baseline-height: 6px;
    --admin-tab-height: 30px;
    --admin-tab-pad-x: 20px;
    --admin-tab-gap-below: 2px;                /* Stefan v04: was 1px in v03 */
    /* Stefan year-level tab greys (inactive bg + hover). Used by every admin
       page that renders year tabs, so keep them tokenised to prevent drift. */
    --admin-year-tab-bg: #d9d9d9;
    --admin-year-tab-bg-hover: #c8c8c8;
    --admin-search-box-w: 200px;
    --admin-search-box-h: 30px;
    --admin-search-offset: 14px;

    /* Typography scale */
    --admin-h1-size: 18px;
    --admin-h1-weight: 600;
    --admin-h2-size: 14px;
    --admin-h2-weight: 700;
    --admin-h2-tracking: 0.5px;
    --admin-sub1-size: 14px;
    --admin-sub1-weight: 700;
    --admin-sub2-size: 12px;
    --admin-sub2-weight: 700;
    --admin-sub2-tracking: 0.5px;
    --admin-sub3-size: 11px;                 /* Stefan v04: small subheading above tabs (e.g. "Year Level") */
    --admin-sub3-weight: 700;
    --admin-sub3-tracking: 0.5px;
    --admin-text1-size: 14px;
    --admin-text1-weight: 400;
    --admin-text2-size: 12px;                /* v03: renamed from "Text X"; was 13px */
    --admin-text2-weight: 700;
    --admin-text3-size: 11px;                /* v03: was 12px */
    --admin-text3-weight: 700;
    --admin-text4-size: 11px;                /* v03: was 12px */
    --admin-text4-weight: 600;               /* v03: was 400 */
    --admin-text5-size: 10px;                /* v03: was 11px */
    --admin-text5-weight: 600;

    /* ── Semantic status tokens (Phase J) ──
       For status messages, validation, severity pills, inline notices. These
       replace the Material-Design hues (#1565c0 blue, #c62828 red, #2e7d32
       green, #e8f5e9 green-tint, #e3f2fd blue-tint) that leaked into admin
       surfaces from the pre-Stefan theme. Use these, not raw hex. */
    --admin-status-info-fg: #1f3f58;         /* deep navy — reuses Download fill family */
    --admin-status-info-bg: #e9f1f8;         /* soft navy wash */
    --admin-status-info-border: #b9ccdf;
    --admin-status-success-fg: #1e6b30;      /* muted green, lower saturation than Material */
    --admin-status-success-bg: #e6f4e9;
    --admin-status-success-border: #b6dcc0;
    --admin-status-error-fg: var(--admin-red-active);  /* Stefan dark-red, not Material red */
    --admin-status-error-bg: #fbe9e9;
    --admin-status-error-border: #e6b8b8;

    /* Severity pills (Student Alerts). Map: high=red, medium=amber, low=grey. */
    --admin-severity-high-bg: var(--admin-status-error-fg);
    --admin-severity-high-fg: var(--admin-white);
    --admin-severity-medium-bg: #b58a22;
    --admin-severity-medium-fg: var(--admin-white);
    --admin-severity-low-bg: #757575;
    --admin-severity-low-fg: var(--admin-white);

    /* Row-selected highlight (datagrids + list rows) — soft dark-red tint,
       replaces Material blue #e3f2fd. */
    --admin-row-selected-bg: rgba(123, 31, 31, 0.08);
    --admin-row-selected-fg: var(--admin-charcoal);

    /* ── Neutral surface tokens (Phase J) ──
       Tokenised replacements for the ubiquitous chrome hex values. Not every
       raw neutral needs to migrate in one go; the point is that any *new*
       admin CSS references these, and Phase N cleans up existing usage. */
    --admin-surface-white: #ffffff;
    --admin-surface-soft: #fafafa;           /* very-faint bg (detail rows, hover detail) */
    --admin-surface-hover: #f0f0f0;
    --admin-surface-hover-strong: #e0e0e0;
    --admin-surface-border: #d0d0d0;
    --admin-surface-border-muted: #e0e0e0;
    --admin-surface-border-soft: #eeeeee;    /* list-separator border */
    --admin-divider: #e5e5e5;
    --admin-text-muted: #555555;             /* body-secondary */
    --admin-text-subtle: #888888;            /* placeholder / tertiary */
    --admin-text-faint: #666666;
    --admin-text-strong: #333333;            /* near-charcoal body emphasis */
}

/* ── Player (Dark theme) ── */
[data-theme="dark"] {
    --player-bg: #000;
    --player-text: #fff;
    --player-subheader-bg: #1a1a1a;
    --player-subheader-text: #fff;
    --player-stem-text: #fff;
    --player-stem-font-style: normal;
    --player-option-bg: #111;
    --player-option-border: #fff;
    --player-option-text: #fff;
    --player-bar-bg: #050505;
    --player-bar-border: #262626;
    --player-btn-active-bg: #fff;
    --player-btn-active-text: #000;
    --player-btn-outline-border: #aaa;
    --player-btn-outline-text: #ccc;
}