/* ==========================================================================
   LEQApp — Canonical design tokens
   Source of truth: site/docs/DESIGN-SYSTEM.md
   Every other CSS file assumes these tokens exist. Do NOT redefine colors,
   fonts, spacing, radius, shadow, or motion outside this file — use var(--leqa-*).
   ========================================================================== */

:root,
[data-theme="dark"] {
  /* ---- Fonts (families loaded via Google Fonts; see DESIGN-SYSTEM §2) ---- */
  --leqa-font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --leqa-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --leqa-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;

  /* ---- Fluid type scale ---- */
  --leqa-fs-eyebrow: 0.8125rem;                       /* 13px */
  --leqa-fs-small: 0.875rem;                           /* 14px */
  --leqa-fs-body: 1.0625rem;                           /* 17px */
  --leqa-fs-lead: clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem);
  --leqa-fs-h6: 1.0625rem;
  --leqa-fs-h5: 1.25rem;
  --leqa-fs-h4: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --leqa-fs-h3: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
  --leqa-fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --leqa-fs-h1: clamp(2.75rem, 1.9rem + 4vw, 5rem);

  --leqa-lh-tight: 1.05;
  --leqa-lh-snug: 1.25;
  --leqa-lh-body: 1.6;
  --leqa-tracking-tight: -0.02em;
  --leqa-tracking-eyebrow: 0.16em;

  --leqa-weight-body: 400;
  --leqa-weight-medium: 500;
  --leqa-weight-semibold: 600;
  --leqa-weight-bold: 700;

  /* ---- Color (dark, primary) ---- */
  --leqa-bg: #03110c;
  --leqa-bg-elev: #061a12;
  --leqa-bg-elev-2: #0a2418;
  --leqa-surface-line: #123524;
  --leqa-border: #163a28;
  --leqa-border-strong: #1f5238;

  --leqa-text: #e8f5ee;
  --leqa-text-muted: #9fb8ab;
  --leqa-text-faint: #6b8378;

  --leqa-accent: #72ff64;
  --leqa-accent-hover: #8dff82;
  --leqa-accent-press: #57e64a;
  --leqa-accent-soft: rgba(114, 255, 100, 0.12);
  --leqa-accent-contrast: #03110c;
  --leqa-glow: rgba(114, 255, 100, 0.45);

  --leqa-danger: #ff6b6b;
  --leqa-warning: #ffd166;
  --leqa-success: #72ff64;

  /* ---- Spacing scale (8px base) ---- */
  --leqa-space-1: 4px;
  --leqa-space-2: 8px;
  --leqa-space-3: 12px;
  --leqa-space-4: 16px;
  --leqa-space-5: 24px;
  --leqa-space-6: 32px;
  --leqa-space-7: 48px;
  --leqa-space-8: 64px;
  --leqa-space-9: 96px;
  --leqa-space-10: 128px;
  --leqa-section-y: clamp(64px, 10vw, 128px);

  /* ---- Radius ---- (capped: website uses a max 5px corner radius everywhere) */
  --leqa-radius-sm: 4px;
  --leqa-radius: 5px;
  --leqa-radius-lg: 5px;
  --leqa-radius-pill: 5px;

  /* ---- Borders ---- */
  --leqa-border-width: 1px;

  /* ---- Shadows ---- */
  --leqa-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --leqa-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  --leqa-shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.55);
  --leqa-shadow-glow: 0 0 0 1px rgba(114, 255, 100, 0.25), 0 0 40px -8px var(--leqa-glow);

  /* ---- Layout ---- */
  --leqa-maxw: 1120px;
  --leqa-maxw-narrow: 720px;
  --leqa-gutter: clamp(20px, 5vw, 40px);

  /* ---- Motion ---- */
  --leqa-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --leqa-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --leqa-dur-fast: 120ms;
  --leqa-dur: 220ms;
  --leqa-dur-slow: 420ms;

  color-scheme: dark;
}

/* ==========================================================================
   Light theme — designed variant (DESIGN-SYSTEM §3)
   ========================================================================== */
[data-theme="light"] {
  --leqa-bg: #f3f8f4;
  --leqa-bg-elev: #ffffff;
  --leqa-bg-elev-2: #e7f1ea;
  --leqa-surface-line: #d9e8df;
  --leqa-border: #d2e3d8;
  --leqa-border-strong: #b6d3c1;

  --leqa-text: #0a1f16;
  --leqa-text-muted: #456154;
  --leqa-text-faint: #6f8a7d;

  --leqa-accent: #0f9d4f;
  --leqa-accent-hover: #0bb359;
  --leqa-accent-press: #0c8444;
  --leqa-accent-soft: rgba(15, 157, 79, 0.12);
  --leqa-accent-contrast: #ffffff;
  --leqa-glow: rgba(15, 157, 79, 0.22);

  --leqa-danger: #c4453f;
  --leqa-warning: #b9821a;
  --leqa-success: #0f9d4f;

  --leqa-shadow-sm: 0 1px 2px rgba(16, 40, 28, 0.08);
  --leqa-shadow: 0 10px 30px rgba(16, 40, 28, 0.10);
  --leqa-shadow-lg: 0 24px 70px rgba(16, 40, 28, 0.14);
  --leqa-shadow-glow: 0 0 0 1px rgba(15, 157, 79, 0.25), 0 0 40px -10px var(--leqa-glow);

  color-scheme: light;
}

/* Follow the OS on first visit when no explicit theme has been chosen.
   main.js sets data-theme once a preference exists; this is the pre-JS default. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --leqa-bg: #f3f8f4;
    --leqa-bg-elev: #ffffff;
    --leqa-bg-elev-2: #e7f1ea;
    --leqa-surface-line: #d9e8df;
    --leqa-border: #d2e3d8;
    --leqa-border-strong: #b6d3c1;
    --leqa-text: #0a1f16;
    --leqa-text-muted: #456154;
    --leqa-text-faint: #6f8a7d;
    --leqa-accent: #0f9d4f;
    --leqa-accent-hover: #0bb359;
    --leqa-accent-press: #0c8444;
    --leqa-accent-soft: rgba(15, 157, 79, 0.12);
    --leqa-accent-contrast: #ffffff;
    --leqa-glow: rgba(15, 157, 79, 0.22);
    color-scheme: light;
  }
}