/* =========================================================
   Epsiloop Design System — Tokens
   Source of truth: colours extracted from main/style.css
   Layers: primitives -> semantic -> component
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Primitives: brand ---------- */
  --ep-burgundy-950: #1a030a;
  --ep-burgundy-900: #3d0010;
  --ep-burgundy-800: #5c0018;
  --ep-burgundy-700: #800020;   /* --burg  */
  --ep-burgundy-600: #a3153a;   /* --burg-2 */
  --ep-pink-500: #ff5a7a;       /* --pink  */
  --ep-pink-300: #ffb3c1;
  --ep-pink-100: #ffe3e9;

  /* ---------- Primitives: neutrals (warm, burgundy-tinted) ---------- */
  --ep-ink-950: #0d0508;        /* --bg */
  --ep-ink-900: #140810;
  --ep-ink-800: #1d0d14;
  --ep-ink-700: #2a1820;
  --ep-ink-500: #6b565d;
  --ep-ink-300: #b7a3a9;        /* --mute */
  --ep-ink-100: #f6eef0;        /* --text */
  --ep-white: #ffffff;

  /* ---------- Primitives: status ---------- */
  --ep-green-500: #3ddc97;
  --ep-amber-500: #ffb454;
  --ep-red-500: #f2545b;
  --ep-blue-500: #6aa6ff;

  /* ---------- Typography ---------- */
  --ep-font-display: "Space Grotesk", system-ui, sans-serif;
  --ep-font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ep-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ep-text-xs: .75rem;   --ep-text-sm: .875rem;  --ep-text-md: 1rem;
  --ep-text-lg: 1.125rem; --ep-text-xl: 1.35rem;  --ep-text-2xl: 1.75rem;
  --ep-text-3xl: 2.25rem; --ep-text-4xl: 3rem;    --ep-text-5xl: clamp(2.8rem, 8vw, 6.5rem);
  --ep-weight-regular: 400; --ep-weight-medium: 500; --ep-weight-semibold: 600; --ep-weight-bold: 700;
  --ep-leading-tight: 1.1; --ep-leading-snug: 1.3; --ep-leading-normal: 1.6;
  --ep-tracking-tight: -.03em; --ep-tracking-wide: .08em; --ep-tracking-eyebrow: .3em;

  /* ---------- Spacing (4px base) ---------- */
  --ep-space-0: 0;    --ep-space-1: 4px;  --ep-space-2: 8px;   --ep-space-3: 12px;
  --ep-space-4: 16px; --ep-space-5: 20px; --ep-space-6: 24px;  --ep-space-8: 32px;
  --ep-space-10: 40px; --ep-space-12: 48px; --ep-space-16: 64px; --ep-space-24: 96px;

  /* ---------- Radius ---------- */
  --ep-radius-xs: 6px;  --ep-radius-sm: 10px; --ep-radius-md: 14px;
  --ep-radius-lg: 20px; --ep-radius-xl: 24px; --ep-radius-pill: 999px;

  /* ---------- Motion ---------- */
  --ep-ease: cubic-bezier(.2, .7, .2, 1);
  --ep-dur-fast: 120ms; --ep-dur: 200ms; --ep-dur-slow: 400ms;

  /* ---------- Layout ---------- */
  --ep-bp-sm: 600px; --ep-bp-md: 900px; --ep-bp-lg: 1200px;
  --ep-container: 1100px;
  --ep-touch-target: 44px;   /* min tap size on mobile */

  /* ---------- Z-index ---------- */
  --ep-z-nav: 10; --ep-z-dropdown: 20; --ep-z-modal: 40; --ep-z-toast: 50; --ep-z-tooltip: 60;

  /* =======================================================
     Semantic tokens — DARK (default, matches website)
     ======================================================= */
  color-scheme: dark;
  --ep-bg: var(--ep-ink-950);
  --ep-bg-raised: var(--ep-ink-900);
  --ep-bg-overlay: rgba(20, 8, 12, .96);
  --ep-surface: rgba(255, 255, 255, .04);       /* --card */
  --ep-surface-hover: rgba(255, 255, 255, .07);
  --ep-surface-active: rgba(255, 255, 255, .1);
  --ep-border: rgba(255, 255, 255, .1);         /* --line */
  --ep-border-strong: rgba(255, 255, 255, .22);

  --ep-text: var(--ep-ink-100);
  --ep-text-muted: var(--ep-ink-300);
  --ep-text-faint: var(--ep-ink-500);
  --ep-text-on-brand: #fff;

  --ep-brand: var(--ep-burgundy-700);
  --ep-brand-strong: var(--ep-burgundy-600);
  --ep-accent: var(--ep-pink-500);
  --ep-accent-soft: rgba(255, 90, 122, .14);
  --ep-link: var(--ep-pink-500);
  --ep-focus: var(--ep-pink-500);

  --ep-success: var(--ep-green-500); --ep-success-soft: rgba(61, 220, 151, .14);
  --ep-warning: var(--ep-amber-500); --ep-warning-soft: rgba(255, 180, 84, .14);
  --ep-danger:  var(--ep-red-500);   --ep-danger-soft:  rgba(242, 84, 91, .16);
  --ep-info:    var(--ep-blue-500);  --ep-info-soft:    rgba(106, 166, 255, .14);

  --ep-gradient-brand: linear-gradient(135deg, var(--ep-burgundy-600), var(--ep-burgundy-700));
  --ep-gradient-text: linear-gradient(100deg, var(--ep-pink-500), var(--ep-burgundy-600) 50%, var(--ep-pink-300));
  --ep-glow: radial-gradient(circle, rgba(128, 0, 32, .55), transparent 65%);

  --ep-shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
  --ep-shadow-md: 0 8px 30px rgba(128, 0, 32, .45);          /* button */
  --ep-shadow-md-hover: 0 12px 40px rgba(163, 21, 58, .65);
  --ep-shadow-lg: 0 20px 60px rgba(0, 0, 0, .6);             /* menus, modals */
  --ep-scrim: rgba(5, 1, 3, .7);
  --ep-glass-bg: rgba(13, 5, 8, .55);
  --ep-inverse-bg: var(--ep-ink-100);
  --ep-inverse-text: var(--ep-ink-950);
}

/* =======================================================
   WHITE (light) theme — <html data-theme="light">, or automatic from the OS
   when no data-theme is set. Force dark with data-theme="dark".
   ======================================================= */
:root[data-theme="light"] {
  color-scheme: light;
  --ep-bg: #ffffff;
  --ep-bg-raised: #fbf7f8;
  --ep-bg-overlay: rgba(255, 255, 255, .97);
  --ep-surface: rgba(128, 0, 32, .04);
  --ep-surface-hover: rgba(128, 0, 32, .07);
  --ep-surface-active: rgba(128, 0, 32, .11);
  --ep-border: rgba(61, 0, 16, .13);
  --ep-border-strong: rgba(61, 0, 16, .32);

  --ep-text: #2a0a14;
  --ep-text-muted: #6b4c55;
  --ep-text-faint: #9c8890;

  --ep-accent: var(--ep-burgundy-700);
  --ep-accent-soft: rgba(128, 0, 32, .09);
  --ep-link: var(--ep-burgundy-600);
  --ep-focus: var(--ep-burgundy-600);

  --ep-success: #12805a; --ep-success-soft: rgba(18, 128, 90, .11);
  --ep-warning: #a35f00; --ep-warning-soft: rgba(163, 95, 0, .12);
  --ep-danger:  #c0262d; --ep-danger-soft:  rgba(192, 38, 45, .1);
  --ep-info:    #2a62c9; --ep-info-soft:    rgba(42, 98, 201, .1);

  --ep-gradient-text: linear-gradient(100deg, var(--ep-burgundy-700), var(--ep-burgundy-600) 50%, #d4476a);
  --ep-shadow-sm: 0 2px 8px rgba(61, 0, 16, .1);
  --ep-shadow-lg: 0 20px 60px rgba(61, 0, 16, .22);
  --ep-glass-bg: rgba(255, 255, 255, .7);
  --ep-inverse-bg: #2a0a14;
  --ep-inverse-text: #ffffff;
  --ep-shadow-md: 0 8px 24px rgba(128, 0, 32, .25);
  --ep-shadow-md-hover: 0 12px 32px rgba(163, 21, 58, .35);
  --ep-glow: radial-gradient(circle, rgba(163, 21, 58, .18), transparent 65%);
  --ep-scrim: rgba(40, 5, 15, .45);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ep-bg: #ffffff;
    --ep-bg-raised: #fbf7f8;
    --ep-bg-overlay: rgba(255, 255, 255, .97);
    --ep-surface: rgba(128, 0, 32, .04);
    --ep-surface-hover: rgba(128, 0, 32, .07);
    --ep-surface-active: rgba(128, 0, 32, .11);
    --ep-border: rgba(61, 0, 16, .13);
    --ep-border-strong: rgba(61, 0, 16, .32);

    --ep-text: #2a0a14;
    --ep-text-muted: #6b4c55;
    --ep-text-faint: #9c8890;

    --ep-accent: var(--ep-burgundy-700);
    --ep-accent-soft: rgba(128, 0, 32, .09);
    --ep-link: var(--ep-burgundy-600);
    --ep-focus: var(--ep-burgundy-600);

    --ep-success: #12805a; --ep-success-soft: rgba(18, 128, 90, .11);
    --ep-warning: #a35f00; --ep-warning-soft: rgba(163, 95, 0, .12);
    --ep-danger:  #c0262d; --ep-danger-soft:  rgba(192, 38, 45, .1);
    --ep-info:    #2a62c9; --ep-info-soft:    rgba(42, 98, 201, .1);

    --ep-gradient-text: linear-gradient(100deg, var(--ep-burgundy-700), var(--ep-burgundy-600) 50%, #d4476a);
    --ep-shadow-sm: 0 2px 8px rgba(61, 0, 16, .1);
    --ep-shadow-lg: 0 20px 60px rgba(61, 0, 16, .22);
    --ep-glass-bg: rgba(255, 255, 255, .7);
    --ep-inverse-bg: #2a0a14;
    --ep-inverse-text: #ffffff;
    --ep-shadow-md: 0 8px 24px rgba(128, 0, 32, .25);
    --ep-shadow-md-hover: 0 12px 32px rgba(163, 21, 58, .35);
    --ep-glow: radial-gradient(circle, rgba(163, 21, 58, .18), transparent 65%);
    --ep-scrim: rgba(40, 5, 15, .45);
  }
}