/* =============================================================================
   LMS design tokens: the ONE place the look of the app is defined.

   Every other theme rule reads these variables; no colour value appears in
   theme.css. To re-brand, change the four BRAND values below. Hover shades,
   tints and washes are derived from them with color-mix(), so they follow
   automatically.

   Brand colours are the app's existing palette (topbar olive, Add-button
   lime, Cancel grey). Contrast, checked against WCAG AA (4.5:1 for text):
     white on --primary         8.2:1    white on --primary-hover   5.9:1
     white on --secondary       6.6:1    --accent on white          5.5:1
     white on --danger          4.8:1    white on --success         5.0:1
     white on --warning         5.2:1    --text-2 on --bg           4.7:1
   If you change a brand colour, re-check these pairs.
   ========================================================================== */

:root {
    /* ---- BRAND: edit these ------------------------------------------------ */
    --brand-primary: #465338;    /* olive: topbar, title bands, grid header, main buttons */
    --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 88%, #ffffff);
    --brand-secondary: #b42318;  /* red: Cancel / Close (deeper than --danger, so Cancel and Delete differ) */
    --brand-accent: #617000;     /* deep lime: links, ticks, radio dots, selection (text-safe) */
    --brand-highlight: #b3c500;  /* signature lime: decorative only, never behind or as text */

    /* ---- Surfaces (neutral) ---------------------------------------------- */
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-2: #fafafa;
    --surface-3: #f5f5f7;
    --surface-header: color-mix(in srgb, var(--brand-primary) 7%, var(--surface));
    --fill: rgba(118, 118, 128, .12);
    --scrim: rgba(17, 20, 13, .45);

    /* ---- Text ------------------------------------------------------------ */
    --text: #1d1d1f;
    --text-2: #6e6e73;
    --text-3: #86868b;
    --label: #3c4043;
    --icon: #5f6368;
    --placeholder: #9aa0a6;
    --on-primary: #ffffff;
    --on-primary-muted: rgba(255, 255, 255, .7);
    --on-primary-divider: rgba(255, 255, 255, .45);
    --on-primary-fill: rgba(255, 255, 255, .14);

    /* ---- Lines ----------------------------------------------------------- */
    --hairline: #d2d2d7;
    --hairline-soft: #e8e8ed;
    --border: #cfd6de;
    --border-hover: #9aa5b1;
    --divider: #e3e5e8;
    --row-border: #edeef1;

    /* ---- Brand roles (derived; normally leave alone) ---------------------- */
    --primary: var(--brand-primary);
    --primary-hover: var(--brand-primary-hover);
    --primary-soft: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    --secondary: var(--brand-secondary);
    --secondary-hover: color-mix(in srgb, var(--brand-secondary) 88%, #000000);
    --accent: var(--brand-accent);
    --accent-soft: color-mix(in srgb, var(--brand-accent) 9%, transparent);
    --row-hover: color-mix(in srgb, var(--brand-highlight) 14%, var(--surface));

    /* ---- Top bar and sidebar icon tiles ---------------------------------- */
    --topbar-bg: var(--primary);
    --topbar-fg: var(--on-primary);
    --tile-1: #0071e3;  /* blue   */
    --tile-2: #1a8f5c;  /* green  */
    --tile-3: #c77700;  /* amber  */
    --tile-4: #6b4fd8;  /* violet */
    --tile-5: #c2410c;  /* rust   */
    --tile-6: #d6336c;  /* rose   */
    --tile-7: #0e7490;  /* teal   */
    --tile-8: #475569;  /* slate  */
    --highlight: var(--brand-highlight);

    /* ---- Status ---------------------------------------------------------- */
    --danger: #d93025;
    --danger-hover: color-mix(in srgb, var(--danger) 88%, #000000);
    --danger-soft: color-mix(in srgb, var(--danger) 11%, var(--surface));
    --success: #1a7f47;          /* spec's #1d8a4e darkened: white text failed AA (4.4:1) */
    --success-hover: color-mix(in srgb, var(--success) 88%, #000000);
    --success-soft: color-mix(in srgb, var(--success) 11%, var(--surface));
    --warning: #b25000;
    --warning-hover: color-mix(in srgb, var(--warning) 88%, #000000);
    --warning-soft: color-mix(in srgb, var(--warning) 11%, var(--surface));
    --info: var(--accent);
    --info-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));

    /* ---- Shape ----------------------------------------------------------- */
    --radius: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --radius-ctl: 4px;
    --radius-check: 2px;
    --radius-pill: 980px;

    /* ---- Depth ----------------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .05);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .06), 0 18px 44px rgba(0, 0, 0, .12);
    --shadow-raised: 0 1px 2px rgba(0, 0, 0, .12);
    --shadow-band: 0 1px 2px rgba(0, 0, 0, .10), 0 4px 12px rgba(0, 0, 0, .16);  /* title band */

    /* ---- Bands: title band and grid header share one gradient ------------ */
    --band-gradient: linear-gradient(180deg, var(--primary-hover) 0%, var(--primary) 100%);

    /* ---- Data grid ------------------------------------------------------- */
    --grid-radius: var(--radius-sm);
    --grid-head-font: 13px;
    --grid-head-pad-y: 10px;

    /* ---- Title band ------------------------------------------------------ */
    --band-pad-y: 9px;
    --band-margin-top: 10px;
    --band-margin-bottom: 8px;
    --grid-cell-font: var(--type-base);
    --grid-cell-pad-y: 10px;
    --grid-cell-pad-y-compact: 7px;    /* .table-sm grids */
    --grid-cell-pad-x: 18px;
    --grid-cell-pad-x-dense: 10px;     /* grids with 8+ columns */
    --grid-separator-w: 2px;

    /* ---- Spacing --------------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 28px;
    --gutter: 16px;
    --page-gutter: 16px;
    --topbar-h: 58px;            /* template default was 70px */
    --logo-h: 44px;              /* full logo in the top bar (was 55px) */
    --logo-h-sm: 36px;           /* small logo, collapsed sidebar */
    --footer-h: 32px;         /* space between the sidebar / window edge and the page content */

    /* ---- Size ------------------------------------------------------------ */
    --control-h: 32px;
    --control-h-compact: 28px;   /* buttons inside grid rows */
    --icon-size: 18px;

    /* ---- Motion ---------------------------------------------------------- */
    --ease: cubic-bezier(.25, .1, .25, 1);
    --fast: .18s var(--ease);

    /* ---- Type ------------------------------------------------------------ */
    --font: "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI", -apple-system, system-ui, sans-serif;
    --type-xs: 11.5px;
    --type-sm: 12.5px;
    --type-label: 12px;
    --type-13: 13px;
    --type-base: 14px;
    --type-title: 16px;
    --type-section: 15px;     /* section heading above a grid */

    /* ---- Dialogs ---------------------------------------------------------- */
    --dialog-head-pad-y: 9px;
    --dialog-foot-pad-y: 8px;
    --dialog-pad-x: var(--space-4);
    --type-display: 24px;
    --tracking-tight: -0.02em;
    --tracking: -0.01em;
    --tracking-caps: 0.02em;

    /* ---- Bootstrap 4's own :root variables -------------------------------- */
    /* --primary, --secondary, --success, --danger, --warning and --info above
       share Bootstrap's names, so they replace its values too. Bootstrap 4.5 is
       compiled CSS and its components do not read them; theme.css does. */
    --font-family-sans-serif: var(--font);
}