/* Atomic Framework, as live on mandeepdhesi.ca (Bricks global variables, read 29 Oct 2026).
   Root 62.5%: 1rem = 10px, so 1.6rem = 16px, matching the site. Edit on the site first,
   then copy here. The dashboard layer below maps these to app roles for light and dark. */

html { font-size: 62.5%; }

:root {
  --primary: oklch(21.78% 0.0481 257.93);
  --secondary: oklch(49.55% 0.0955 80.25);
  --accent: oklch(55.54% 0.1835 28.51);
  --text-color: oklch(38.85% 0.0319 260.98);
  --heading-color: oklch(21.78% 0.0481 257.93);
  --bg-body: oklch(100% 0 0);
  --bg-surface: oklch(97% 0.0029 264.54);
  --border-color: oklch(92.41% 0.0075 260.73);
  --on-accent: oklch(100% 0 0);
  --font-body: 'Geist', system-ui, sans-serif;
  --font-heading: 'Funnel Display', 'Geist', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --text-xs: clamp(1.1rem, calc(0.0926vw + 1.0667rem), 1.2rem);
  --text-s: clamp(1.3rem, calc(0.1852vw + 1.2333rem), 1.5rem);
  --text-m: clamp(1.6rem, calc(0.1852vw + 1.5333rem), 1.8rem);
  --text-l: clamp(1.8rem, calc(0.5556vw + 1.6000rem), 2.4rem);
  --text-xl: clamp(2.025rem, calc(1.0880vw + 1.6333rem), 3.2rem);
  --text-2xl: clamp(2.278rem, calc(1.8398vw + 1.6157rem), 4.265rem);
  --text-line-height: calc(8px + 2ex);
  --heading-line-height: calc(4px + 2ex);
  --heading-font-weight: 600;
  --space-xs: clamp(1.024rem, calc(0.3481vw + 0.9000rem), 1.4rem);
  --space-s: clamp(1.28rem, calc(0.6481vw + 1.0467rem), 1.98rem);
  --space-m: clamp(1.6rem, calc(1.1111vw + 1.2000rem), 2.8rem);
  --space-l: clamp(2.0rem, calc(1.8148vw + 1.3467rem), 3.96rem);
  --space-xl: clamp(2.5rem, calc(2.8704vw + 1.4667rem), 5.6rem);
  --container-width: 1320px;
  --max-width-m: 720px;
  --max-width-s: 560px;
  --radius-xs: 0.4rem;
  --radius-s: 0.8rem;
  --radius-m: 1.2rem;
  --radius-l: 1.8rem;
  --radius-full: 9999px;
  --transition: all 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
  --transition-fast: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-tooltip: 700;
  --focus-ring-width: 0.2rem;
  --focus-ring-offset: 0.2rem;
}

/* Dashboard type (operator, 29 Oct 2026, revised): Merriweather for headings and text,
   Source Code Pro for IDs and figures. Overrides the site fonts for this app only. */
:root {
  --font-body: 'Merriweather', Georgia, serif;
  --font-heading: 'Merriweather', Georgia, serif;
  --font-mono: 'Source Code Pro', ui-monospace, monospace;
  --heading-font-weight: 700;

  /* Derived from Atomic tokens for app density; never typed as raw values in app.css. */
  --space-3xs: calc(var(--space-xs) * 0.3);
  --space-2xs: calc(var(--space-xs) * 0.6);
  --control-s: calc(var(--text-s) * 2.2);          /* chips, small buttons, ticks */
  --control-m: calc(var(--text-s) * 2.75);         /* buttons, search */
  --control-l: calc(var(--text-m) * 3);            /* sign-in field */
  --dot: calc(var(--text-xs) * 0.6);
  --bar: calc(var(--space-3xs) * 1.3);             /* progress bar height */
  --sheet-width: calc(var(--max-width-m) * 0.78);
  --reading: calc(var(--max-width-m) + var(--space-xl) * 2);
  --border-strong: 1.5px;
  --line-height-text: 1.55;
  --line-height-snug: 1.3;
  --line-height-flat: 1;
  --tracking-tight: -0.02em;
  --opacity-busy: 0.6;
  --duration-slow: 0.6s;
  --duration-sheet: 0.26s;
  --duration-shimmer: 1.4s;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --blur-bar: 14px;
  --blur-scrim: 2px;
  --sheet-mobile-height: 92dvh;
  --composer-max: 40vh;
  --gate-top: 12vh;
  --icon-stroke: 2.4;
  --clamp-lines: 6;
  --tracking-label: 0.06em;
  --tick-size: calc(var(--text-s) * 1.35);   /* checkbox: about 20px */
  --logo-tag-scale: 0.4em;           /* tagline size relative to the wordmark, so it fits its width */
}

/* Reduced motion: switch the motion tokens off instead of overriding rules. */
@media (prefers-reduced-motion: reduce) {
  :root { --transition: none; --transition-fast: none; --duration-slow: 0s; --duration-sheet: 0s; --duration-shimmer: 0s; }
}

/* Dashboard roles, light. */
:root, :root[data-theme="light"] {
  --bg: var(--bg-surface);
  --card: var(--bg-body);
  --ink: var(--heading-color);
  --text: var(--text-color);
  --muted: oklch(47% 0.025 260);
  --line: var(--border-color);
  --line-strong: oklch(86% 0.01 260);
  --gold: var(--secondary);           /* AKR gold: progress fills, one primary action */
  --gold-ink: oklch(44% 0.09 80);     /* gold as text on white, 4.5:1 */
  --gold-soft: color-mix(in oklab, var(--secondary) 12%, var(--bg-body));
  --on-gold: oklch(100% 0 0);
  --ok: oklch(46% 0.12 150);
  --warn: oklch(50% 0.12 65);
  --bad: oklch(50% 0.17 27);
  --info: oklch(46% 0.12 250);
  --track: oklch(93% 0.008 260);
  --shadow: 0 1px 2px oklch(22% 0.05 258 / 0.06), 0 8px 24px oklch(22% 0.05 258 / 0.06);
  --scrim: oklch(15% 0.02 260 / 0.42);
  --focus: var(--heading-color);
  color-scheme: light;
}

/* Dark: the same navy family, lifted. */
:root[data-theme="dark"] {
  --bg: oklch(16.5% 0.02 258);
  --card: oklch(20.5% 0.024 258);
  --ink: oklch(96% 0.006 258);
  --text: oklch(86% 0.012 258);
  --muted: oklch(72% 0.018 258);
  --line: oklch(28% 0.025 258);
  --line-strong: oklch(36% 0.028 258);
  --gold: oklch(76% 0.11 82);
  --gold-ink: oklch(80% 0.11 82);
  --gold-soft: oklch(28% 0.04 80);
  --on-gold: oklch(18% 0.03 258);
  --ok: oklch(78% 0.13 150);
  --warn: oklch(82% 0.12 75);
  --bad: oklch(75% 0.14 25);
  --info: oklch(79% 0.1 245);
  --track: oklch(28% 0.024 258);
  --shadow: 0 1px 2px oklch(0% 0 0 / 0.3), 0 12px 32px oklch(0% 0 0 / 0.28);
  --scrim: oklch(5% 0.01 260 / 0.6);
  --focus: oklch(80% 0.11 82);
  color-scheme: dark;
}