/* School Workbench — design tokens. THE single source for every surface: the student/teacher app
   (app.css), the marketing site (site.css) and the admin + biz consoles (console.css) all link this
   file first, so one edit here moves the whole product. Warm-parchment LIGHT (default) + deep-
   espresso DARK, following the device; a toggle sets [data-theme] and is remembered.
   Type: Fraunces (display serif) · Public Sans (body) · JetBrains Mono (uppercase labels, code). */
:root{
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  /* Content metadata (dates, counts, snippets) uses the sans family so it reads as calm text;
     --mono is reserved for uppercase section labels + genuinely technical bits (code, kbd, clock). */
  --meta:var(--sans);

  /* --- Motion: a heavy fluid settle (lux), a smooth ease-out (ease), a gentle spring for momentum
     interactions, one fast press response. Durations are short — latency is the enemy. --- */
  --lux:cubic-bezier(.16,1,.3,1);
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.2,.9,.25,1); /* settles without overshoot: bounce only belongs on momentum */
  --press:90ms; --dur:.34s;

  /* --- Layout --- */
  --maxw:1120px; --rcard:26px;
  /* Minimum comfortable hit area for interactive controls (Apple: 44x44). */
  --tap:44px;
  /* Spacing scale: 8pt grid with 4pt subdivisions (Apple layout metric). */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
  /* Type scale: rem-based (the web analog of Dynamic Type), anchored on a 16px body floor. */
  --t-caption:.6875rem;   /* 11px */
  --t-footnote:.8125rem;  /* 13px */
  --t-callout:.9375rem;   /* 15px */
  --t-body:1rem;          /* 16px — reading floor */
  --t-headline:1.0625rem; /* 17px */
  --t-title3:1.25rem;     /* 20px */
  --t-title2:1.5rem;      /* 24px */
  --t-title1:1.75rem;     /* 28px */
  --t-large:2.125rem;     /* 34px */

  /* --- LIGHT: warm parchment --- */
  --bg:#f7f2e9; --bg2:#f1eadd; --panel:#fffdf8; --panel2:#f4eee3; --panel3:#ece3d4;
  --line:#e4dac9; --line2:#d5c7b2; --sel:#efe7d8;
  --fg:#2b2219; --dim:#6c6153; --dimmer:#6f6352;
  --accent:#c2761a; --accent2:#d68a2c; --accentsoft:rgba(194,118,26,.10); --onaccent:#231409;
  /* Text-safe variants (WCAG AA ≥4.5:1 on --panel): the accent is fine as a fill, not as small text. */
  --link:#8f5512; --danger-text:#b0402f; --ok-text:#2e7a54; --warn-text:#7a5411;
  /* Marketing aliases — the "gold" is the accent; never a second hue. */
  --gold:var(--accent); --gold2:var(--accent2); --goldsoft:var(--accentsoft); --goldline:rgba(194,118,26,.32);
  --ok:#3f9b6c; --warn:#b9822f; --late:#c9503f; --soon:#b9822f; --good:var(--ok);
  /* Depth: soft, diffuse, almost-imperceptible (the Apple-card shadow); a lifted variant for
     hover on large cards. No colored halos anywhere — warmth comes from the surfaces and the serif. */
  --shadow-sm:0 1px 2px rgba(74,50,24,.05),0 3px 10px -5px rgba(74,50,24,.12);
  --shadow:0 2px 6px -2px rgba(74,50,24,.09),0 16px 36px -18px rgba(74,50,24,.20);
  --shadow-lift:0 6px 12px rgba(43,34,25,.05),0 40px 80px -32px rgba(43,34,25,.24);
  --hair:inset 0 1px 0 rgba(255,255,255,.6);
  --glow:transparent;
  --accent-glow:var(--shadow-sm);
  --accent-glow-lg:var(--shadow);

  /* --- Semantic roles: one name, resolved through the theme tokens above. --- */
  --text-primary:var(--fg); --text-secondary:var(--dim); --text-tertiary:var(--dimmer);
  --surface:var(--panel); --surface-raised:var(--panel2); --surface-sunken:var(--panel3);
  --hairline:var(--line); --hairline-strong:var(--line2);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1a1815; --bg2:#151310; --panel:#211f1b; --panel2:#2a2723; --panel3:#322e29;
  --line:#37322c; --line2:#443e37; --sel:#312c26;
  --fg:#f2efe9; --dim:#a8a199; --dimmer:#968e82;
  --accent:#d3812b; --accent2:#dc9038; --accentsoft:rgba(211,129,43,.10);
  --link:#dc9038; --danger-text:#e8766e; --ok-text:#5ab98a; --warn-text:#e2b24a;
  --goldline:rgba(211,129,43,.28);
  --ok:#5ab98a; --warn:#d6a44a; --late:#e0655c; --soon:#e2b24a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 3px 10px -5px rgba(0,0,0,.5);
  --shadow:0 4px 12px -4px rgba(0,0,0,.5),0 18px 40px -18px rgba(0,0,0,.6);
  --shadow-lift:0 8px 16px rgba(0,0,0,.34),0 48px 90px -34px rgba(0,0,0,.7);
  --hair:inset 0 1px 0 rgba(255,255,255,.045);
  --glow:transparent;
}}
:root[data-theme="dark"]{
  --bg:#1a1815; --bg2:#151310; --panel:#211f1b; --panel2:#2a2723; --panel3:#322e29;
  --line:#37322c; --line2:#443e37; --sel:#312c26;
  --fg:#f2efe9; --dim:#a8a199; --dimmer:#968e82;
  --accent:#d3812b; --accent2:#dc9038; --accentsoft:rgba(211,129,43,.10);
  --link:#dc9038; --danger-text:#e8766e; --ok-text:#5ab98a; --warn-text:#e2b24a;
  --goldline:rgba(211,129,43,.28);
  --ok:#5ab98a; --warn:#d6a44a; --late:#e0655c; --soon:#e2b24a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 3px 10px -5px rgba(0,0,0,.5);
  --shadow:0 4px 12px -4px rgba(0,0,0,.5),0 18px 40px -18px rgba(0,0,0,.6);
  --shadow-lift:0 8px 16px rgba(0,0,0,.34),0 48px 90px -34px rgba(0,0,0,.7);
  --hair:inset 0 1px 0 rgba(255,255,255,.045);
  --glow:transparent;
}

/* Native controls (time pickers, selects, scrollbars) follow the theme instead of rendering white. */
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

/* Lucide icons (lucide.dev, ISC): sit on the text baseline, never squash in flex rows. */
svg.lucide{vertical-align:-0.125em;flex-shrink:0}