/* Design system tokens. Set --brand (and --brand-2) from the logo; every colour below follows.
   Why each rule: vault note "36 What Makes UI Outstanding". Role names: note 05.
   Dark mode: follows the OS; force it with data-theme="dark" or "light" on <html> or any section.
   shortcut: needs light-dark() and relative colours (Chrome 123, Safari 18, Firefox 128, all 2024);
   older browsers get no colours, so add hex fallbacks only if a client's analytics show them. */
:root {
  --brand: oklch(0.55 0.13 165);   /* the logo's action colour */
  --brand-2: oklch(0.78 0.14 75);  /* a warm second logo colour, small marks only */
  color-scheme: light dark;

  /* Surfaces and text: the brand hue at fixed lightness (Radix steps 1-2, 11-12) */
  --paper:      light-dark(oklch(from var(--brand) 0.985 min(c, 0.006) h), oklch(from var(--brand) 0.17 min(c, 0.012) h));
  --paper-warm: light-dark(oklch(1 0 0),                                    oklch(from var(--brand) 0.215 min(c, 0.014) h)); /* cards */
  --ink:        light-dark(oklch(from var(--brand) 0.24 min(c, 0.04) h),   oklch(from var(--brand) 0.96 min(c, 0.01) h));
  --ink-soft:   light-dark(oklch(from var(--brand) 0.38 min(c, 0.035) h),  oklch(from var(--brand) 0.86 min(c, 0.015) h));
  --ink-muted:  light-dark(oklch(from var(--brand) 0.5 min(c, 0.03) h),    oklch(from var(--brand) 0.74 min(c, 0.02) h));
  --ink-fill:   light-dark(oklch(from var(--brand) 0.26 min(c, 0.05) h),   oklch(from var(--brand) 0.12 min(c, 0.02) h)); /* dark panels, dark in both themes */
  --on-fill:    oklch(0.97 0 0);

  /* Action colour (Radix 9-10): lightness capped so it passes 4.5:1 both ways (note 05).
     A light brand (yellow, lime) that must stay light: set --accent and --on-accent by hand. */
  --accent:        light-dark(oklch(from var(--brand) min(l, 0.5) c h), oklch(from var(--brand) max(l, 0.74) c h));
  --accent-strong: light-dark(oklch(from var(--brand) min(l, 0.44) c h), oklch(from var(--brand) max(l, 0.84) c h)); /* hover text */
  --on-accent:     light-dark(oklch(1 0 0), oklch(from var(--brand) 0.18 min(c, 0.03) h));
  --accent-soft:   color-mix(in oklch, var(--accent) 12%, transparent); /* tonal buttons, selected chips (Radix 3-5) */
  --highlight:        var(--brand-2);
  --highlight-strong: light-dark(oklch(from var(--brand-2) min(l, 0.5) c h), var(--brand-2)); /* small text */

  /* Edges (Radix 6-8) */
  --rule:       color-mix(in oklch, var(--ink) 12%, transparent);
  --rule-heavy: color-mix(in oklch, var(--ink) 30%, transparent);
  --edge:       inset 0 0 0 1px color-mix(in oklch, var(--ink) 14%, transparent); /* the one card edge (note 29) */
  --focus:      var(--accent);

  /* Status: red only for errors and real discounts */
  --sale: light-dark(oklch(0.53 0.2 27), oklch(0.72 0.17 25));
  --ok:   light-dark(oklch(0.5 0.13 150), oklch(0.76 0.15 150));
  --warn: light-dark(oklch(0.52 0.12 70), oklch(0.8 0.14 75));

  /* State layers (Material 3): current text colour over the fill */
  --state-hover: 8%; --state-focus: 10%; --state-press: 10%; --state-drag: 16%;
  --disabled: 0.38;

  /* Type: Bangla face in every stack; load the web fonts the project picks (note 05 step 2) */
  --font-body: "Inter", "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif;
  --font-heading: var(--font-body);
  --font-bangla-serif: "Noto Serif Bengali", "Noto Serif", Georgia, serif; /* Bangla headings and names */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; /* fixed: meta, buttons, body */
  /* Fluid steps, ratio 1.125 at 320px to 1.2 at 1440px (Utopia) */
  --step-1: clamp(1.125rem, 1.1036rem + 0.1071vw, 1.2rem);    /* 18-19px card titles */
  --step-2: clamp(1.2656rem, 1.2158rem + 0.2491vw, 1.44rem);  /* 20-23px */
  --step-3: clamp(1.4238rem, 1.3369rem + 0.4345vw, 1.728rem); /* 23-28px section titles */
  --step-4: clamp(1.6018rem, 1.467rem + 0.674vw, 2.0736rem);  /* 26-33px page titles */
  --step-5: clamp(1.802rem, 1.606rem + 0.9804vw, 2.4883rem);  /* 29-40px hero */
  --leading-body: 1.6; --leading-tight: 1.25; --leading-bangla: 1.75;

  /* Space: 4px scale (same steps as Tailwind's p-1 .. p-24) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --gutter: 16px;   /* set per profile: note 22 */
  --section: clamp(2.75rem, 2.2rem + 2.75vw, 4.5rem);

  /* Shape (note 05) */
  --radius-card: 14px; --radius-item: 10px; --radius-media: 10px; --radius-input: 10px; --radius-pill: 999px;
  --control-sm: 32px; --control-md: 40px; --control-lg: 44px;

  /* Depth: floating layers only (menu, toast, dialog); cards get --edge, no shadow (note 29) */
  --shadow-ink: light-dark(oklch(from var(--brand) 0.25 0.03 h), oklch(0 0 0));
  --shadow-sm: 0 1px 2px color-mix(in oklch, var(--shadow-ink) 6%, transparent), 0 4px 10px -6px color-mix(in oklch, var(--shadow-ink) 16%, transparent);
  --shadow-md: 0 2px 4px color-mix(in oklch, var(--shadow-ink) 6%, transparent), 0 12px 24px -12px color-mix(in oklch, var(--shadow-ink) 24%, transparent);
  --shadow-lg: 0 1px 2px color-mix(in oklch, var(--shadow-ink) 5%, transparent), 0 10px 24px -12px color-mix(in oklch, var(--shadow-ink) 18%, transparent), 0 28px 50px -30px color-mix(in oklch, var(--shadow-ink) 26%, transparent);

  /* Motion (note 05 easings) */
  --ease-arrive: cubic-bezier(.16,1,.3,1); --ease-move: cubic-bezier(.22,1,.36,1); --ease-pop: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;
}
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
@media (max-width: 639px) { :root { --radius-card: 12px; --radius-media: 8px; } }
@media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } }

/* Magic Lanthon School: colours from the logo (gold #AC8840, projector navy #0E1C28), plus one colour
   per course (set in the admin, used as --c). Dark and light bands in turn (docs/DESIGN_BRIEF.md). */
@font-face { font-family: "General Sans"; src: url(/assets/fonts/general-sans-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(/assets/fonts/general-sans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Switzer"; src: url(/assets/fonts/switzer-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url(/assets/fonts/switzer-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Switzer"; src: url(/assets/fonts/switzer-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --brand: #D4B06A;   /* the logo's gold, lifted so it reads on black: the projector lamp */
  --brand-2: #0B0B0C;
  --paper:      light-dark(#F2F2F0, #0B0B0C);
  --paper-warm: light-dark(#FFFFFF, #151516);
  --paper-tint: light-dark(#E9EAEC, #111112);   /* alternate band ground, cool so the course colours stay clean */
  --ink:        light-dark(#0B0B0C, #F2F0EA);
  --ink-soft:   light-dark(#3A3A3D, #C8C5BE);
  --ink-muted:  light-dark(#5E5E63, #9A978F);
  --ink-fill:   #0B0B0C;
  /* Main button: monochrome (black on light bands, ivory on dark); it lights up gold on hover */
  --accent:        light-dark(#0B0B0C, #F2F0EA);
  --on-accent:     light-dark(#F2F0EA, #0B0B0C);
  --gold:          #D4B06A;                      /* near-black label on it: 9.6:1 */
  --accent-strong: light-dark(#7A5A1C, #D4B06A); /* gold as text: 5.3:1 on the tint band, 9.6:1 on black */
  --accent-soft:   color-mix(in oklch, #D4B06A 18%, transparent);
  --highlight: #D4B06A;
  --rule:       color-mix(in oklch, var(--ink) 13%, transparent);
  --focus: light-dark(#7A5A1C, #D4B06A);

  --font-body: "Switzer", "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif;
  --font-heading: "General Sans", "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif;

  --gutter: 16px;
  --container: 1280px;                         /* Rafi, 16 Oct 2026: sections were too wide; each band should fit one screen */
  --pad: clamp(16px, 3.4vw, 64px);             /* page side gutter */
  --radius-card: 4px; --radius-media: 4px;
  --header-h: 72px;
}
@media (max-width: 639px) { :root { --header-h: 60px; } }