/* ═══════════════════════════════════════════════════════════════════════════
   PHYSICSFORUM.ORG — DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ──────────────────────────────────────────────────────────────
   v4.9: the Google Fonts @import has been REMOVED.

   Three reasons:
     1. @import inside CSS is render-blocking and serialised — the browser
        must fetch tokens.css, parse it, THEN start fetching fonts. It is the
        slowest possible way to load a webfont.
     2. It is a third-party request on every pageview (privacy / GDPR), and
        fonts.googleapis.com is blocked or slow in some regions.
     3. If it fails, the whole typographic system falls back at once.

   Fonts are now enqueued properly from functions.php with preconnect, and
   the stacks below degrade gracefully to good system faces. To self-host
   fully, drop woff2 files into assets/fonts/ and see the @font-face block
   in that folder's README.
   ───────────────────────────────────────────────────────────────────── */

/* ── Colour Palette ── */
:root {
  --color-space-navy:    #0A1628;
  --color-academic-blue: #1B3A6B;
  --color-electric:      #2563EB;
  --color-quantum-gold:  #F59E0B;
  --color-dark-gold:     #B45309;
  --color-photon-white:  #F8FAFC;
  --color-ice-blue:      #DBEAFE;
  --color-neutron-grey:  #94A3B8;
  --color-dark-grey:     #334155;
  --color-slate:         #1E293B;
  --color-fusion-green:  #10B981;
  --color-alert-red:     #EF4444;
  --color-soft-purple:   #7C3AED;
  --color-code-bg:       #0F172A;

  /* Typography */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, Cambria, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'Cascadia Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */

  /* Spacing — 8px grid */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.1),  0 2px 4px rgba(0,0,0,0.08);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.06);
  --shadow-xl:   0 20px 25px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.06);
  --shadow-glow: 0 0 20px rgba(37,99,235,0.3);
  --shadow-gold: 0 0 20px rgba(245,158,11,0.4);

  /* Transitions */
  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.25s ease;
  --transition-slow:   all 0.4s ease;
  --transition-spring: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-base:    1;
  --z-above:   10;
  --z-sticky:  100;
  --z-drawer:  200;
  --z-modal:   300;
  --z-toast:   400;
  --z-tooltip: 500;
}

/* ── Dark Mode Overrides ── */
[data-theme="dark"] {
  --color-photon-white:  #0F172A;
  --color-ice-blue:      #1E293B;
  --color-dark-grey:     #CBD5E1;
  --color-neutron-grey:  #64748B;
  --color-slate:         #0F172A;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-photon-white:  #0F172A;
    --color-ice-blue:      #1E293B;
    --color-dark-grey:     #CBD5E1;
    --color-neutron-grey:  #64748B;
    --color-slate:         #0F172A;
  }
}