/* Satoshi — self-hosted, no external font CDN. Files vendored
   under assets/fonts/satoshi/. font-display:swap avoids a blank-
   text flash; system fallback in --font/--au-font covers the gap. */
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi/Satoshi-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ══════════════════════════════════════════════
   Shared design tokens — light/dark theme
   Loaded before main.css / attendance.php's inline
   <style> / menu.php / nav.php, all of which reference
   these variable NAMES (unchanged) but now get their
   VALUES from here so the whole app retones as one.

   Toggle: document.documentElement[data-theme] = 'dark'|'light'
   (see assets/js/theme.js). Default (no attribute) = dark.

   Brand palette: #7E3BEB (accent / primary actions, links,
   focus rings), #381D72 (dark accent / selected states,
   gradient dark-stop, major UI accents), #020912 (dark bg),
   #101720 (dark surface). --ac/--ac2 carry these two purples
   through every component that already consumes them.

   --ink-rgb is a base RGB channel used by literal
   rgba(var(--ink-rgb), N) text/icon/border declarations
   throughout main.css / menu.php / nav.php / attendance.php —
   flipping this one triplet retones every hand-tuned opacity
   value (rgba(var(--ink-rgb),.45) etc.) without having to
   invent a token for each of the dozens of distinct opacities
   already in use.
══════════════════════════════════════════════ */

:root,
:root[data-theme="dark"] {
  /* ── base channel for literal text/icon/border rgba() calls ── */
  --ink-rgb: 255, 255, 255;

  /* ── page background ── */
  --page-bg-1: #020912;
  --page-bg-2: #0b0a1a;
  --page-bg-3: #05070d;
  /* faint ambient glow pools, low enough that the canvas still reads as
     near-black — a hint of brand warmth in the corners, not a purple wash */
  --page-grad:
    radial-gradient(ellipse 70% 50% at 12% -8%, rgba(126, 59, 235, .09), transparent 55%),
    radial-gradient(ellipse 60% 45% at 105% 108%, rgba(56, 29, 114, .12), transparent 55%),
    linear-gradient(135deg, var(--page-bg-1) 0%, var(--page-bg-2) 50%, var(--page-bg-3) 100%);
  --body-bg: #020912;

  /* ── accent: brand purple (dark) ── */
  --ac: #7e3beb;
  --ac-rgb: 126, 59, 235;
  --ac2: #381d72;
  --ac3: #a78bfa;
  --accent-grad: linear-gradient(135deg, #381d72 0%, #7e3beb 100%);
  --accent-shadow: rgba(126, 59, 235, .50);
  --text-grad: linear-gradient(135deg, #c4b5fd 0%, #7e3beb 55%, #a78bfa 100%);

  /* ── shared motion / vibrancy tokens (theme-invariant, defined once) ── */
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
  --blur: saturate(180%) blur(20px);

  /* ── status (muted, secondary to the single accent) ── */
  --grn: #10b981;
  --grn-rgb: 16, 185, 129;
  --dng: #ef4444;
  --dng-rgb: 239, 68, 68;
  --vio: #8b7cf6;
  --vio-rgb: 139, 124, 246;
  --amb: #f59e0b;
  --amb-rgb: 245, 158, 11;

  /* ── text ladder (attendance.php's existing --tx/--tx2/--tx3/--txm) ── */
  --tx: #e7ebf3;
  --tx2: #99a2af;
  --tx3: #b7bfcc;
  --txm: #6b7688;

  /* ── glass / panel surfaces — mostly neutral again; a hint of purple
     is enough here, this token covers too much surface area (chips,
     inputs, dividers) to carry a strong tint without looking overdone ── */
  --panel-bg: rgba(255, 255, 255, .05);
  --panel-bg-strong: rgba(255, 255, 255, .08);
  --panel-border: rgba(255, 255, 255, .11);
  --panel-border-strong: rgba(255, 255, 255, .17);

  /* attendance dashboard panel surfaces (dark: subtle black recess, matches pre-theme values) */
  --sc-bg: rgba(0, 0, 0, .04);
  --panel-recess: rgba(0, 0, 0, .12);
  --cbar-bg: rgba(0, 0, 0, .20);
  --input-surface: rgba(0, 0, 0, .35);
  --input-surface-focus: rgba(0, 0, 0, .65);
  --table-card-bg: rgba(0, 0, 0, .20);
  --table-head-bg: rgba(0, 0, 0, .02);

  /* ── dashboard flat panel tokens (existing names — must stay solid
     colors, not gradients: --g0/--g1 are consumed as `border: ... var(--g1)`
     and `border-*-color: var(--dropdown-bg)` elsewhere, which reject
     gradient values. Depth/vibrancy comes from lifting these clearly off
     --page-bg-* in both lightness and hue instead. ) */
  --g0: rgba(18, 16, 26, .93);
  --g1: rgba(24, 21, 36, .89);
  --g2: rgba(255, 255, 255, .06);
  --g3: rgba(255, 255, 255, .13);
  --gb: rgba(255, 255, 255, .12);
  --gbd: rgba(0, 0, 0, .45);
  --gshadow: 0 8px 32px rgba(126, 59, 235, .13), 0 2px 10px rgba(0, 0, 0, .35);
  --gshadow2: 0 4px 18px rgba(126, 59, 235, .09), 0 1px 4px rgba(0, 0, 0, .28);

  /* tinted per-colour (stat cards etc, existing names) — --blu-* is the
     "primary/accent" stat-card variant, retoned to the brand purple. */
  --blu-bg: rgba(126, 59, 235, .10);
  --blu-b: rgba(126, 59, 235, .25);
  --blu-s: rgba(126, 59, 235, .16);
  --grn-bg: rgba(16, 185, 129, .10);
  --grn-b: rgba(16, 185, 129, .25);
  --grn-s: rgba(16, 185, 129, .16);
  --vio-bg: rgba(139, 124, 246, .10);
  --vio-b: rgba(139, 124, 246, .25);
  --vio-s: rgba(139, 124, 246, .16);
  --amb-bg: rgba(245, 158, 11, .10);
  --amb-b: rgba(245, 158, 11, .25);
  --amb-s: rgba(245, 158, 11, .16);
  --red-bg: rgba(239, 68, 68, .10);
  --red-b: rgba(239, 68, 68, .25);
  --red-s: rgba(239, 68, 68, .16);

  /* ── sidebar / topnav (existing names, bumped toward opaque now that
     backdrop-filter is gone — flat surfaces need to fully cover content).
     Also solid-only: --nav-bg is consumed as a `border: ... var(--nav-bg)`
     ring color elsewhere. */
  --sb-bg: rgba(8, 7, 13, .90);
  --sb-border: rgba(255, 255, 255, .08);
  --nav-bg: rgba(9, 8, 14, .76);
  --dropdown-bg: rgba(19, 16, 26, .88);

  --shadow-md: 0 8px 28px rgba(56, 29, 114, .16), 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-lg: 0 24px 64px rgba(56, 29, 114, .18), 0 6px 20px rgba(0, 0, 0, .45);

  /* opaque fill for browser autofill backgrounds (must be solid, not translucent) */
  --input-bg-solid: #101720;

  /* login page decorative orbs/beams */
  --orb-1: rgba(126, 59, 235, .45);
  --orb-2: rgba(56, 29, 114, .40);
  --orb-3: rgba(167, 139, 250, .32);
}

:root[data-theme="light"] {
  --ink-rgb: 15, 23, 42;

  --page-bg-1: #f7f5fb;
  --page-bg-2: #f1eefa;
  --page-bg-3: #f5f3fa;
  /* same ambient-glow technique as dark, at a fraction of the opacity so
     it reads as premium warmth, not murk */
  --page-grad:
    radial-gradient(ellipse 70% 50% at 12% -8%, rgba(126, 59, 235, .09), transparent 55%),
    radial-gradient(ellipse 60% 45% at 105% 108%, rgba(56, 29, 114, .06), transparent 55%),
    linear-gradient(135deg, var(--page-bg-1) 0%, var(--page-bg-2) 50%, var(--page-bg-3) 100%);
  --body-bg: #f7f5fb;

  --ac: #7e3beb;
  --ac-rgb: 126, 59, 235;
  --ac2: #381d72;
  --ac3: #5b21b6;
  --accent-grad: linear-gradient(135deg, #381d72 0%, #7e3beb 100%);
  --accent-shadow: rgba(126, 59, 235, .32);
  --text-grad: linear-gradient(135deg, #7e3beb 0%, #5b21b6 55%, #381d72 100%);

  --grn: #059669;
  --grn-rgb: 5, 150, 105;
  --dng: #dc2626;
  --dng-rgb: 220, 38, 38;
  --vio: #6d4de6;
  --vio-rgb: 109, 77, 230;
  --amb: #d97706;
  --amb-rgb: 217, 119, 6;

  --tx: #111827;
  --tx2: #475569;
  --tx3: #5b6b82;
  --txm: #94a3b8;

  --panel-bg: rgba(255, 255, 255, .72);
  --panel-bg-strong: rgba(255, 255, 255, .92);
  --panel-border: rgba(15, 23, 42, .08);
  --panel-border-strong: rgba(15, 23, 42, .14);

  /* attendance dashboard panel surfaces (light: lifted white glass, not dark recess) */
  --sc-bg: rgba(255, 255, 255, .75);
  --panel-recess: rgba(15, 23, 42, .025);
  --cbar-bg: rgba(255, 255, 255, .60);
  --input-surface: rgba(255, 255, 255, .70);
  --input-surface-focus: rgba(255, 255, 255, .95);
  --table-card-bg: rgba(255, 255, 255, .65);
  --table-head-bg: rgba(15, 23, 42, .03);

  --g0: rgba(255, 253, 255, .95);
  --g1: rgba(252, 248, 255, .90);
  --g2: rgba(15, 23, 42, .04);
  --g3: rgba(15, 23, 42, .08);
  --gb: rgba(15, 23, 42, .10);
  --gbd: rgba(15, 23, 42, .10);
  --gshadow: 0 8px 28px rgba(126, 59, 235, .16), 0 2px 8px rgba(15, 23, 42, .06);
  --gshadow2: 0 4px 14px rgba(126, 59, 235, .11), 0 1px 4px rgba(15, 23, 42, .05);

  --blu-bg: rgba(126, 59, 235, .08);
  --blu-b: rgba(126, 59, 235, .22);
  --blu-s: rgba(126, 59, 235, .12);
  --grn-bg: rgba(5, 150, 105, .08);
  --grn-b: rgba(5, 150, 105, .22);
  --grn-s: rgba(5, 150, 105, .12);
  --vio-bg: rgba(109, 77, 230, .08);
  --vio-b: rgba(109, 77, 230, .22);
  --vio-s: rgba(109, 77, 230, .12);
  --amb-bg: rgba(217, 119, 6, .08);
  --amb-b: rgba(217, 119, 6, .22);
  --amb-s: rgba(217, 119, 6, .12);
  --red-bg: rgba(220, 38, 38, .08);
  --red-b: rgba(220, 38, 38, .22);
  --red-s: rgba(220, 38, 38, .12);

  --sb-bg: rgba(250, 247, 255, .84);
  --sb-border: rgba(56, 29, 114, .10);
  --nav-bg: rgba(250, 247, 255, .78);
  --dropdown-bg: rgba(250, 247, 255, .90);

  --shadow-md: 0 8px 24px rgba(56, 29, 114, .13);
  --shadow-lg: 0 20px 48px rgba(56, 29, 114, .16);

  --input-bg-solid: #f1eefa;

  --orb-1: rgba(126, 59, 235, .22);
  --orb-2: rgba(56, 29, 114, .18);
  --orb-3: rgba(167, 139, 250, .18);
}