/* ==========================================================================
   Pocket Studio Academy — design tokens
   Dark-first. Light theme is an override, not a second system.
   ========================================================================== */

:root {
  /* ---- Type ------------------------------------------------------------ */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.65;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-tighter: -0.035em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.08em;

  /* ---- Space (4px base) ------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  /* ---- Radii ----------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ---- Layout ---------------------------------------------------------- */
  --shell-max: 1440px;
  --sidebar-w: 300px;
  --rail-w: 220px;
  --prose-max: 74ch;
  --topbar-h: 60px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 380ms;

  /* ---- Colour: dark (default) ------------------------------------------ */
  --bg: #08090d;
  --bg-soft: #0d0f15;
  --surface: #12141c;
  --surface-2: #171a24;
  --surface-3: #1e2230;
  --border: #232735;
  --border-strong: #333849;
  --border-subtle: #1a1e29;

  --text: #e9ebf2;
  --text-2: #a6adbf;
  --text-3: #6b7285;
  --text-inverse: #0a0b0f;

  --accent: #7c6cf0;
  --accent-soft: #9d92f5;
  --accent-dim: rgba(124, 108, 240, 0.14);
  --accent-line: rgba(124, 108, 240, 0.36);

  --cyan: #3ecfd5;
  --cyan-dim: rgba(62, 207, 213, 0.13);
  --green: #45d483;
  --green-dim: rgba(69, 212, 131, 0.13);
  --amber: #f0b542;
  --amber-dim: rgba(240, 181, 66, 0.13);
  --rose: #f2678b;
  --rose-dim: rgba(242, 103, 139, 0.13);
  --red: #f2545b;
  --red-dim: rgba(242, 84, 91, 0.13);
  --gold: #e8c15f;
  --gold-dim: rgba(232, 193, 95, 0.13);

  /* Part accents, referenced by [data-accent] */
  --a-aurora: #4ecdc4;
  --a-violet: #7c6cf0;
  --a-amber: #f0b542;
  --a-cyan: #3ecfd5;
  --a-emerald: #45d483;
  --a-rose: #f2678b;
  --a-gold: #e8c15f;

  /* ---- Syntax ---------------------------------------------------------- */
  --code-bg: #0c0e14;
  --code-border: #1e2230;
  --code-gutter: #454c60;
  --code-text: #d8dce8;
  --syn-keyword: #b48ef7;
  --syn-string: #7fd88f;
  --syn-number: #f0b06a;
  --syn-comment: #5d6478;
  --syn-fn: #62c8f0;
  --syn-type: #f5d67b;
  --syn-annot: #f2678b;
  --syn-punct: #8990a3;
  --code-hl: rgba(124, 108, 240, 0.15);
  --code-hl-line: #7c6cf0;

  /* ---- Shadows --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 0 1px var(--accent-line), 0 8px 32px rgba(124, 108, 240, 0.18);

  color-scheme: dark;
}

/* ---- Colour: light ----------------------------------------------------- */
:root[data-theme='light'] {
  --bg: #fbfbfd;
  --bg-soft: #f4f5f8;
  --surface: #ffffff;
  --surface-2: #f6f7fa;
  --surface-3: #eef0f5;
  --border: #e2e5ec;
  --border-strong: #ccd1dc;
  --border-subtle: #edeff4;

  --text: #14161d;
  --text-2: #545b6b;
  --text-3: #838a9a;
  --text-inverse: #ffffff;

  --accent: #5b4bd6;
  --accent-soft: #6d5ce0;
  --accent-dim: rgba(91, 75, 214, 0.09);
  --accent-line: rgba(91, 75, 214, 0.28);

  --cyan: #0f9aa3;
  --cyan-dim: rgba(15, 154, 163, 0.1);
  --green: #17924f;
  --green-dim: rgba(23, 146, 79, 0.1);
  --amber: #a9751a;
  --amber-dim: rgba(169, 117, 26, 0.1);
  --rose: #cf3f68;
  --rose-dim: rgba(207, 63, 104, 0.1);
  --red: #cf2f38;
  --red-dim: rgba(207, 47, 56, 0.1);
  --gold: #9a7b17;
  --gold-dim: rgba(154, 123, 23, 0.1);

  --a-aurora: #12968e;
  --a-violet: #5b4bd6;
  --a-amber: #a9751a;
  --a-cyan: #0f9aa3;
  --a-emerald: #17924f;
  --a-rose: #cf3f68;
  --a-gold: #9a7b17;

  --code-bg: #f7f8fb;
  --code-border: #e2e5ec;
  --code-gutter: #a6adbf;
  --code-text: #1d2029;
  --syn-keyword: #7a3fc4;
  --syn-string: #17743d;
  --syn-number: #b1610d;
  --syn-comment: #7c8494;
  --syn-fn: #0a6fa8;
  --syn-type: #9a6a08;
  --syn-annot: #c03464;
  --syn-punct: #5f6675;
  --code-hl: rgba(91, 75, 214, 0.1);
  --code-hl-line: #5b4bd6;

  --shadow-sm: 0 1px 2px rgba(20, 22, 29, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 22, 29, 0.08);
  --shadow-lg: 0 16px 48px rgba(20, 22, 29, 0.12);
  --shadow-glow: 0 0 0 1px var(--accent-line), 0 8px 32px rgba(91, 75, 214, 0.12);

  color-scheme: light;
}