/* ============================================================
   ACHIEVE DESIGN TOKENS (#584, phase 2 - PROPOSED)

   Semantic custom properties for colour, radius, spacing, shadow and
   type. Every value is the MOST-USED existing value in its family
   (see docs/feature-design/css-consolidation-584/inventory/PALETTE_MAP.md),
   so adopting a token changes nothing visually.

   Rules:
   - Names say what a value is FOR (--surface, --text-muted,
     --accent-primary), never what it looks like (--green) and never
     which feature owns it (--ad-*, --bge-* stay as feature aliases
     until migrated).
   - No component rule in this file. Tokens only.
   - Dark mode (#372) will redefine the same names under
     [data-theme="dark"]; Learn content and question stems stay on the
     light "paper" tokens. Nothing here implements that yet.
   - Bootstrap 4.1.1 is still the base. Token names do not collide with
     Bootstrap 5's --bs-* namespace (#568), and the 4.6.2 drop-in (#377)
     needs no change here.

   Loaded globally by base.html before every other sheet (phase 4, agreed
   23 Oct 2026). Defining tokens changes nothing visually; only rules that
   read them do.

   Each token carries a one-line comment: the style guide's Tokens section
   is generated from this file by tools/build_style_guide.py.
   ============================================================ */

:root {
    /* ---- Surfaces ---- */
    --surface: #ffffff;              /* cards, modals, inputs */
    --canvas: #f8f9fa;               /* page and panel backgrounds */
    --surface-muted: #e9ecef;        /* disabled fills, subtle bands */
    --surface-band: #dbe5f0;         /* #534 modal header/footer bands */
    --surface-band-soft: #f4f8fb;    /* alternating paper bands */
    --surface-band-mid: #63778c;     /* topic bands (#584 batch 4): the legacy grey band #708498 one notch darker, white text 4.62 (AA) */
    --surface-paper: #ffffff;        /* Learn content and question stems: stays light in dark mode */

    /* ---- Lines ---- */
    --line: #dee2e6;                 /* default borders */
    --line-strong: #ced4da;          /* input borders */
    --line-soft: #eef2f6;            /* hairlines inside cards */
    --line-band: #c4d3e3;            /* #534 band dividers */
    --line-band-strong: #b3c5d8;     /* secondary button border */
    --line-content-table: #49274a;   /* global table border (load-bearing for Definition tables) */

    /* ---- Text ---- */
    --text: #212529;                 /* body text */
    --text-dark: #333333;            /* legacy body text */
    --text-strong: #2f4358;          /* headings, modal titles */
    --text-slate: #2f4358;           /* slate ink: headings, labels, tile text (29 Oct 2026: six slates became two) */
    --text-slate-2: #2f4358;         /* alias of --text-slate; retire in step 7 */
    --text-slate-3: #4a5b6e;         /* slate mid: secondary text, default card header, chrome */
    --text-muted: #6c757d;           /* muted text */
    --text-faint: #97a0aa;           /* captions, muted caps labels */
    --text-on-accent: #ffffff;       /* text on filled buttons and bands */

    /* ---- Brand ---- */
    --brand: #673366;                /* ACHIEVE navbar purple */
    --brand-soft: #ab7cbc;           /* lilac CTA, AI access */
    --brand-deep: #49274a;           /* dark purple */
    --brand-bge: #6b4c8e;            /* BGE purple */
    --brand-succeed: #005a82;        /* SUCCEED navbar blue */
    --brand-purple-vivid: #8e44ad;   /* vivid purple accents */

    /* ---- Accents ---- */
    --accent-primary: #1a7f55;       /* primary action green (29 Oct 2026: was the stock #28a745; AA 4.99:1) */
    --accent-primary-hover: #146645; /* primary action hover */
    --accent-danger: #b8334d;        /* destructive action buttons (29 Oct 2026; --danger stays the RAG / state red) */
    --accent-danger-hover: #952a40;  /* destructive action hover */
    --accent-teal: #507771;          /* quiet action teal (29 Oct 2026: was #6d9b91, which failed AA; now 4.98:1) */
    --accent-teal-hover: #3f615b;    /* quiet action hover (darker; the old hover went lighter and failed) */
    --accent-teal-muted: #96aaab;    /* teal-grey chrome, disabled teal buttons */
    --accent-teal-light: #6fccd4;    /* Learn option buttons */
    --accent-steel: #4682b4;         /* steel blue (help centre) */
    --accent-blue: #0e7dc0;          /* assessment blue */
    --accent-slate: #4a5b6e;         /* alias of --text-slate-3 (slate mid); retire in step 7 */
    --accent-slate-2: #4a5b6e;       /* alias of --text-slate-3; retire in step 7 */
    --accent-slate-3: #4a5b6e;       /* alias of --text-slate-3; retire in step 7 */
    --link: #2170da;                 /* descriptive links */
    --link-bootstrap: #007bff;       /* Bootstrap primary blue */

    /* ---- State ---- */
    --success: #28a745;              /* success / RAG green */
    --success-alt: #5fa052;          /* softer green */
    --success-bright: #62b73e;       /* bright green (mark correct) */
    --success-soft: #d4edda;         /* success background */
    --success-ink: #155724;          /* text on success background */
    --warning: #ffc107;              /* amber / RAG amber */
    --warning-soft: #fff3cd;         /* amber prompt background */
    --warning-ink: #856404;          /* text on amber background */
    --warning-strong: #d9a62e;       /* amber prompt edge (Manage Classes pending requests) */
    --orange: #f8a916;               /* orange accents */
    --danger: #dc3545;               /* danger / RAG red */
    --danger-dark: #b0453f;          /* danger text on white */
    --danger-soft: #f8d7da;          /* danger background */
    --danger-ink: #721c24;           /* text on danger background */
    --info: #17a2b8;                 /* info */
    --info-soft: #d1ecf1;            /* info background */
    --info-ink: #0c5460;             /* text on info background */

    /* ---- Neutrals outside Bootstrap ---- */
    --grey-300: #e0e0e0;             /* legacy light grey */
    --grey-400: #cccccc;             /* legacy mid grey */
    --grey-600: #555555;             /* legacy dark grey */
    --black: #000000;                /* pure black */

    /* ---- Radius ---- */
    --radius-sm: 4px;                /* inputs, small chips */
    --radius: 6px;                   /* buttons */
    --radius-md: 8px;                /* cards, modals */
    --radius-lg: 12px;               /* hero panels, large tiles */
    --radius-pill: 999px;            /* pills and badges */
    --radius-circle: 50%;            /* avatars, status dots */

    /* ---- Spacing (4px grid) ---- */
    --space-1: 4px;                  /* hairline gaps */
    --space-2: 8px;                  /* tight padding, chip padding */
    --space-3: 12px;                 /* button padding, compact cards */
    --space-4: 16px;                 /* card padding, gutters */
    --space-5: 20px;                 /* section gaps */
    --space-6: 24px;                 /* modal padding */
    --space-8: 32px;                 /* page sections */

    /* ---- Shadows ---- */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);         /* chips, small cards */
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.1);            /* cards (most used) */
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2);        /* raised cards, dropdowns */
    --shadow-lg: 0 10px 30px rgba(50, 65, 85, 0.3);    /* modals (#534) */
    --focus-ring: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* input and button focus */

    /* ---- Type ---- */
    --font-body: "Roboto", sans-serif;                  /* body copy */
    --font-heading: "Work Sans", sans-serif;            /* headings, titles */
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* codes, class codes */
    --text-xs: 0.75rem;              /* captions, meta */
    --text-sm: 0.85rem;              /* secondary copy, table cells */
    --text-base: 0.9rem;             /* ACHIEVE body (most used) */
    --text-md: 1rem;                 /* emphasised copy */
    --text-lg: 1.1rem;               /* card titles */
    --text-xl: 1.25rem;              /* section headings */
    --text-2xl: 1.5rem;              /* page titles */
    --weight-regular: 400;           /* body */
    --weight-medium: 500;            /* buttons (28 Oct 2026: a notch above body, not the 600 shout) */
    --weight-semibold: 600;          /* labels, captions, pills */
    --weight-bold: 700;              /* headings */
}