/* Lusic design tokens — the single source for colour, type, space, shape, depth and motion.
   Every page loads this first. Rules and rationale: docs/style.md. */
:root{
  /* Brand palette (fixed) */
  --lusic-l:#7D438C;          /* L — Learning */
  --lusic-u:#753584;          /* U — Understanding */
  --lusic-si:#660874;         /* Si — Self-Improving, primary */
  --lusic-c:#926B18;          /* C — Collaboration, deep gold */
  --lusic-gold:#E2CA5B;       /* light gold: glows, highlights, never text */
  /* Interface colours */
  --purple:var(--lusic-si);--purple-hover:#51065d;--purple-soft:#f4edf5;--purple-line:#e6daea;--purple-mist:#9B6AA8;
  --gold:var(--lusic-gold);--gold-deep:var(--lusic-c);--gold-soft:#fbf5de;
  --paper:#fcfbf8;--white:#fff;--ink:#302637;--muted:#746c78;--line:#e8e3e9;--danger:#8e334b;--green:#386b51;
  /* Surfaces and lines */
  --surface:#fff;--surface-2:#faf8fb;--purple-line:#e6daea;--line-strong:#d8c8de;--muted-2:#968c9b;--mist:#9b6aa8;
  --glass:rgba(252,251,248,.8);--overlay:rgba(48,38,55,.33);--glow-purple:#f1e6f3;--glow-gold:#fbf5de99;
  /* Brand fills: buttons and bars keep the true brand purple in both themes; --purple is the readable accent for text */
  --brand:#660874;--brand-hover:#51065d;--on-brand:#fff;--brand-edge:transparent;
  /* Gold tints and text */
  --gold-line:#eee2ae;--gold-text:#796624;
  /* Status */
  --danger-soft:#fbf0f3;--danger-line:#f0d9e0;--green-soft:#eef6f1;--green-line:#d3e7da;
  /* Logo and wordmark strokes (official colours; dark mode lifts the purples so the mark stays legible) */
  --logo-si:#660874;--logo-l:#7D438C;--logo-u:#753584;--logo-gold:#926B18;

  /* Fluid type: grows smoothly with the viewport between a phone minimum and a desktop maximum (rem keeps browser zoom) */
  --fs-2xs:clamp(.75rem,.72rem + .12vw,.8125rem);      /* 12-13 */
  --fs-xs:clamp(.8125rem,.78rem + .15vw,.875rem);      /* 13-14 */
  --fs-sm:clamp(.875rem,.84rem + .18vw,.9375rem);      /* 14-15 */
  --fs-base:clamp(.9375rem,.9rem + .2vw,1.0625rem);    /* 15-17 */
  --fs-md:clamp(1rem,.95rem + .25vw,1.125rem);         /* 16-18 */
  --fs-lg:clamp(1.125rem,1rem + .5vw,1.375rem);        /* 18-22 */
  --fs-xl:clamp(1.375rem,1.15rem + 1vw,1.75rem);       /* 22-28 */
  --fs-2xl:clamp(1.625rem,1.3rem + 1.4vw,2.125rem);    /* 26-34 */
  --fs-stat:clamp(1.5rem,1.2rem + 1.2vw,1.875rem);     /* 24-30 */
  --fs-display:clamp(2.25rem,1.4rem + 3.6vw,3.625rem); /* 36-58 */
  --font-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Space (4px grid) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;

  /* Shape */
  --radius-sm:8px;--radius-md:12px;--radius:18px;--radius-lg:26px;--radius-pill:999px;

  /* Depth: purple-tinted, low and soft */
  --shadow-1:0 1px 2px #30263708;
  --shadow-2:0 14px 34px #6608740f;
  --shadow-3:0 30px 80px -40px #6608743d;
  --shadow-cta:0 6px 18px #66087422;
  --focus-ring:0 0 0 4px #66087418;

  /* Motion. One beat drives every ambient loop; interface transitions use the short durations. */
  --motion-beat:800ms;
  --dur-fast:160ms;--dur-base:240ms;--dur-slow:420ms;--dur-handoff:300ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);   /* state changes */
  --ease-out:cubic-bezier(.2,.8,.2,1);       /* elements arriving */
  --ease-in-out:cubic-bezier(.65,0,.35,1);   /* things moving across */
}
/* Dark theme: follows the system setting. Same hues, lifted for contrast on a purple-tinted near-black.
   Accent purple #C98BD8 is 7.2:1 on --paper; light gold #E2CA5B is 11:1; body text 15:1. */
@media (prefers-color-scheme: dark){:root{
  color-scheme:dark;
  --paper:#17121a;--white:#1f1923;--surface:#1f1923;--surface-2:#241d29;--ink:#ECE6EF;--muted:#A79DAE;--muted-2:#8a7f91;
  --line:#342b3a;--purple-line:#3d2f45;--line-strong:#4a3d52;--mist:#b48bc0;
  --purple:#C98BD8;--purple-hover:#d7a5e2;--purple-soft:#2b1f31;
  --brand:#660874;--brand-hover:#7a1b89;--on-brand:#fff;--brand-edge:#9a5aab;
  --gold:#E2CA5B;--gold-deep:#D4B24A;--gold-soft:#2c2614;--gold-line:#4a3f1c;--gold-text:#E2CA5B;
  --danger:#f0a3b6;--danger-soft:#2d1820;--danger-line:#4d2a35;--green:#8fcfa8;--green-soft:#18281f;--green-line:#2c4a38;
  --glass:rgba(23,18,26,.8);--overlay:rgba(0,0,0,.55);--glow-purple:#2a1d30;--glow-gold:#2c26144d;
  --logo-si:#C98BD8;--logo-l:#D3A2DE;--logo-u:#C592D3;--logo-gold:#E2CA5B;
  --shadow-2:0 14px 34px #0000004d;--shadow-3:0 30px 80px -40px #000000a6;--shadow-cta:0 6px 18px #00000059;--focus-ring:0 0 0 4px #c98bd833;
}}