/* Inter 4.1 variable (OFL, self-hosted: assets/fonts/inter, checksums beside it) for Latin text and numbers;
   Chinese falls through to the system face in --font-sans. The portal loads this file as /brand/tokens.css. */
@font-face{font-family:"Inter Lusic";src:url("assets/fonts/inter/InterVariable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* 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;

  /* Lusic UI type scale, shared by lusic.top, the model API portal and the server dashboards (Beszel, zashboard).
     Fixed steps for UI text (dense, predictable); only the public hero stays fluid. Pairs: size / line-height. */
  --fs-2xs:12px;  --lh-2xs:16px;   /* metadata, captions, badges */
  --fs-xs:13px;   --lh-xs:18px;    /* secondary text, table headers */
  --fs-sm:14px;   --lh-sm:20px;    /* body, tables, buttons, navigation */
  --fs-base:15px; --lh-base:24px;  /* public reading copy */
  --fs-md:16px;   --lh-md:24px;    /* card and section titles */
  --fs-lg:18px;   --lh-lg:26px;    /* tile titles, dialog titles */
  --fs-xl:20px;   --lh-xl:28px;
  --fs-2xl:24px;  --lh-2xl:30px;   /* page titles */
  --fs-stat:28px; --lh-stat:32px;  /* key numbers (tabular) */
  --fs-display:clamp(2.25rem,1.6rem + 2.6vw,3rem); /* 36-48, public hero only */
  --tracking-tight:-.01em;--tracking-stat:-.02em;
  --font-sans:"Inter Lusic",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --font-features:"cv11","ss03";  /* Inter: single-storey a, rounded quotes */
  --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 */
  /* controls 6, panels 8, cards 12, large containers 16 */
  --radius-sm:6px;--radius-md:8px;--radius:12px;--radius-lg:16px;--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;
}}