/* Design tokens — the single source of truth for color, elevation and theming.
   Loaded right after bootstrap.min.css so every later stylesheet (site.css,
   custom.css, scoped component CSS) can consume these variables. */

:root {
    /* Brand ramp — the landing purple is THE product color everywhere. */
    --brand-50: #f6f4ff;
    --brand-100: #eeeaff;
    --brand-400: #8b74ff;
    --brand-600: #5c3dff;
    --brand-700: #492de6;
    --brand-rgb: 92, 61, 255;

    --primary: var(--brand-600);
    --primary-hover: var(--brand-700);
    --focus-ring: rgba(var(--brand-rgb), 0.25);

    /* Bootstrap 5.1 defines --bs-primary on :root but compiles the blue into
       its components; re-pin the variable so any var(--bs-primary) reference
       resolves to the brand. Compiled classes are overridden in custom.css. */
    --bs-primary: var(--brand-600);
    --bs-primary-rgb: var(--brand-rgb);

    --secondary: #6B7280;
    --success: #10B981;
    --danger: #EF4444;
    --warning: #F59E0B;
    --info: #3B82F6;

    --bg-color: #FFFFFF;
    --surface: #F9FAFB;
    --card-bg: #FFFFFF;
    --border: #E5E7EB;
    --text-color: #111827;
    --text-muted: #6B7280;

    --nav-bg: #E8EAED;
    --nav-border: #E5E7EB;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

    /* One typeface for the whole product. Inter is already fetched in
       _Host.cshtml; landing has always used it, the app never did. */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;

    /* Type + radius scales. Defined for consistency; adopt in new/touched
       code rather than retrofitting every existing rule at once. */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-full: 999px;

    /* Layout — desktop shell dimensions. The critical CSS in _Host.cshtml must
       mirror --sidebar-w (it can't read custom properties before this sheet
       loads), so change both together. --content-max matches the cap the
       Dashboard grids already use (the in-repo desktop reference pattern). */
    --content-max: 1400px;
    --sidebar-w: 240px;

    /* Minimal spacing trio for new/touched code — not a full scale. */
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;

    /* Status colors — payment + attendance semantics, defined once.
       *-solid: bold fill for stat cards (white text, >= 4.5:1 contrast).
       *-bg / *-fg: light tint + readable ink for badges and table rows.
       Replaces three unrelated palettes (Bootstrap contextual classes,
       BS4-era gradients, and the app tokens) that all meant "paid/overdue". */
    --status-paid-solid: #15803D;
    --status-pending-solid: #2563EB;
    --status-overdue-solid: #B45309;
    --status-urgent-solid: #B91C1C;
    --status-total-solid: var(--brand-600);

    --status-paid-bg: #DCFCE7;
    --status-paid-fg: #15803D;
    --status-pending-bg: #DBEAFE;
    --status-pending-fg: #1E40AF;
    --status-overdue-bg: #FEF3C7;
    --status-overdue-fg: #7A5B00;
    --status-urgent-bg: #FEE2E2;
    --status-urgent-fg: #991B1B;

    /* Attendance */
    --status-present-bg: #DCFCE7;
    --status-present-fg: #15803D;
    --status-absent-bg: #FEE2E2;
    --status-absent-fg: #991B1B;
    --status-late-bg: #FEF3C7;
    --status-late-fg: #7A5B00;

    /* Entity accents — decorative category tints, NOT status. Green/amber/red/
       blue are reserved for payment/attendance meaning; entities use brand +
       three harmonized non-status hues. Rule: an icon tile paints its
       background with *-bg and its glyph with *-fg from the SAME hue, so the
       icon can never clash with the tile it sits in. Keep the set small and
       group entities by category rather than giving every item its own hue —
       secondary/nav icons default to the brand tile. */
    --entity-students-bg: var(--brand-100);
    --entity-students-fg: var(--brand-700);
    --entity-classes-bg: #DCEFEA;
    --entity-classes-fg: #0F6E56;
    --entity-teachers-bg: #E7EAF0;
    --entity-teachers-fg: #334155;
    --entity-parents-bg: #FBE8EF;
    --entity-parents-fg: #A1355A;
    --entity-brand-bg: var(--brand-100);
    --entity-brand-fg: var(--brand-700);
}

/* Dark mode - minimal changes */
[data-theme="dark"] {
    --bg-color: #111827;
    --surface: #1F2937;
    --card-bg: #1F2937;
    --border: #374151;
    --text-color: #F9FAFB;
    --text-muted: #9CA3AF;

    --nav-bg: #1F2937;
    --nav-border: #374151;

    /* Status tints go deep/desaturated in dark so the ink stays legible.
       The *-solid fills keep their value (bold + white text reads in both). */
    --status-paid-bg: #0F2E1C;
    --status-paid-fg: #86EFAC;
    --status-pending-bg: #17233F;
    --status-pending-fg: #93C5FD;
    --status-overdue-bg: #3A2E08;
    --status-overdue-fg: #FDE68A;
    --status-urgent-bg: #3A1414;
    --status-urgent-fg: #FCA5A5;

    --status-present-bg: #0F2E1C;
    --status-present-fg: #86EFAC;
    --status-absent-bg: #3A1414;
    --status-absent-fg: #FCA5A5;
    --status-late-bg: #3A2E08;
    --status-late-fg: #FDE68A;

    /* Entity accents go deep/desaturated in dark; the glyph ink lightens so it
       stays legible on the dark tile (same hue, still no clash). */
    --entity-classes-bg: #10312A;
    --entity-classes-fg: #5DCAA5;
    --entity-teachers-bg: #2A3446;
    --entity-teachers-fg: #C0CAD9;
    --entity-parents-bg: #3A1E2A;
    --entity-parents-fg: #EBA9C1;
    --entity-students-bg: rgba(var(--brand-rgb), 0.20);
    --entity-students-fg: var(--brand-400);
    --entity-brand-bg: rgba(var(--brand-rgb), 0.20);
    --entity-brand-fg: var(--brand-400);
}