/* Design tokens — cloned from tsm-tool.com by measurement, not by eye.
 *
 * Every colour, radius, font and easing below was read from the live site with
 * getComputedStyle()/getBoundingClientRect() and its declared CSS custom
 * properties, then mapped onto this project's existing token names so all
 * components inherit the theme without being rewritten.
 *
 * Source mapping (their name -> ours):
 *   --tsm-page-bg        -> --bg
 *   --tsm-surface        -> --surface        (nav/topbar/rail, blur 30px)
 *   --tsm-bg-card        -> --surface-2      (cards, blur 20px)
 *   --tsm-border         -> --border
 *   --tsm-input-border   -> --border-strong
 *   --tsm-text-primary   -> --text
 *   --tsm-text-secondary -> --muted
 *   --tsm-text-muted     -> --faint
 *
 * The site switches themes with `html.dark`; this project uses
 * `data-theme="dark"`. The values are identical, only the switch differs.
 */
:root {
  color-scheme: light;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;   /* their card padding */
  --space-8: 32px;
  --space-12: 48px;

  /* Both are open-source (SIL OFL). Body text is Plus Jakarta Sans; headings
     use Space Grotesk, exactly as the reference does. */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;   /* measured 14px body */
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --leading: 1.15;       /* measured 16.1px on 14px */
  --heading-tracking: -0.02em;  /* measured -0.7px on 35px */

  /* Measured: card 20px, button 14px, input 12px. */
  --radius-sm: 12px;
  --radius: 14px;
  --radius-lg: 20px;

  /* ---- Light palette (html:not(.dark)) ---- */
  --bg: #f0f2f5;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-2: rgba(255, 255, 255, 0.9);
  --surface-hover: rgba(124, 58, 237, 0.06);
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.08);
  --input-bg: rgba(255, 255, 255, 0.8);
  /* Opaque: a native <select> popup cannot be translucent. */
  --select-popup-bg: #ffffff;

  --text: #1e293b;
  --muted: rgba(30, 41, 59, 0.7);
  --faint: rgba(30, 41, 59, 0.5);

  --primary: #7c3aed;          /* their light nav-hover accent */
  --primary-hover: #6d28d9;
  --primary-ink: #ffffff;
  --primary-soft: #f5f3ff;     /* their --bg-nav-hv-color */

  --accent-gold: #f7b731;
  --accent-emerald: #10b981;
  --accent-purple: #a855f7;
  --accent-blue: #255ff4;

  --success: #10b981;
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.1);
  --focus: #7c3aed;

  /* Glows are the signature of this design; 0.15 alpha in light. */
  --glow-gold: rgba(245, 158, 11, 0.15);
  --glow-purple: rgba(168, 85, 247, 0.15);
  --glow-blue: rgba(99, 102, 241, 0.15);
  --glow-emerald: rgba(16, 185, 129, 0.15);

  /* Their heading treatment: gradient-filled display type. */
  --heading-gradient: linear-gradient(135deg, #8b5cf6, #a78bfa);

  --blur-surface: blur(30px);
  --blur-card: blur(20px);

  --shadow-1: 0 2px 2px rgba(0, 0, 0, 0.06), 0 1px 5px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 8px 24px -8px rgba(30, 41, 59, 0.18);

  /* Measured on their CTA: 0.4s cubic-bezier(0.22, 1, 0.36, 1). */
  --transition: 400ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 200ms cubic-bezier(0.22, 1, 0.36, 1);

  --scrollbar-width: 10px;
}

/* ---- Dark palette (html.dark) ---- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0a0a0f;
  /* Their body is a three-stop vertical gradient, not a flat fill. */
  --bg-gradient: linear-gradient(#0a0a0f 0%, #12121a 50%, #0a0a0f 100%);
  --surface: rgba(15, 15, 25, 0.85);
  --surface-2: rgba(255, 255, 255, 0.03);
  --surface-hover: rgba(139, 92, 246, 0.08);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.1);
  --input-bg: rgba(255, 255, 255, 0.06);
  --select-popup-bg: #16161f;

  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.7);
  --faint: rgba(255, 255, 255, 0.5);

  --primary: #a855f7;
  --primary-hover: #8b5cf6;
  --primary-ink: #ffffff;
  --primary-soft: rgba(139, 92, 246, 0.16);

  --success: #10b981;
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --focus: #a78bfa;

  --glow-gold: rgba(245, 158, 11, 0.3);
  --glow-purple: rgba(168, 85, 247, 0.3);
  --glow-blue: rgba(99, 102, 241, 0.3);
  --glow-emerald: rgba(16, 185, 129, 0.3);

  --shadow-1: 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
              0 1px 5px rgba(0, 0, 0, 0.2);
  --shadow-2: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
}

/* Follow the OS only while the user has not chosen; an explicit choice on
   :root[data-theme] wins in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0a0a0f;
    --bg-gradient: linear-gradient(#0a0a0f 0%, #12121a 50%, #0a0a0f 100%);
    --surface: rgba(15, 15, 25, 0.85);
    --surface-2: rgba(255, 255, 255, 0.03);
    --surface-hover: rgba(139, 92, 246, 0.08);
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.1);
    --input-bg: rgba(255, 255, 255, 0.06);
    --select-popup-bg: #16161f;

    --text: #ffffff;
    --muted: rgba(255, 255, 255, 0.7);
    --faint: rgba(255, 255, 255, 0.5);

    --primary: #a855f7;
    --primary-hover: #8b5cf6;
    --primary-soft: rgba(139, 92, 246, 0.16);

    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.14);
    --focus: #a78bfa;

    --glow-gold: rgba(245, 158, 11, 0.3);
    --glow-purple: rgba(168, 85, 247, 0.3);
    --glow-blue: rgba(99, 102, 241, 0.3);
    --glow-emerald: rgba(16, 185, 129, 0.3);

    --shadow-1: 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
                0 1px 5px rgba(0, 0, 0, 0.2);
    --shadow-2: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  }
}