/* ============================================================================
   The Atlas Project — shared design tokens (framework-free)
   Source of truth: 00-SHARED/DESIGN-SYSTEM.md. Identical across all 11 sites.
   Only --accent-* and --font-product-* are overridden per product (accent.css).
   ============================================================================ */

:root {
  /* ---------- Type scale (1.250 major third, base 16px) ---------- */
  --font-size-2xs: 0.694rem;
  --font-size-xs:  0.8rem;
  --font-size-sm:  0.875rem;
  --font-size-base:1rem;
  --font-size-lg:  1.25rem;
  --font-size-xl:  1.563rem;
  --font-size-2xl: 1.953rem;
  --font-size-3xl: 2.441rem;
  --font-size-4xl: 3.052rem;
  --font-size-5xl: 3.815rem;
  --font-size-6xl: 4.768rem;

  /* ---------- Line heights ---------- */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* ---------- Letter spacing ---------- */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.08em;

  /* ---------- Font weights ---------- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ---------- Font families (display + body swapped per product) ---------- */
  --font-display: var(--font-product-display, "Inter"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    var(--font-product-body, "Inter"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Spacing (8px grid; 4px half-steps) ---------- */
  --space-0:0; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem;
  --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem;
  --space-8:3rem; --space-9:4rem; --space-10:5rem; --space-11:6rem; --space-12:8rem;

  /* ---------- Radius ---------- */
  --radius-xs:0.25rem; --radius-sm:0.375rem; --radius-md:0.5rem;
  --radius-lg:0.75rem; --radius-xl:1rem; --radius-2xl:1.5rem; --radius-full:9999px;

  /* ---------- Borders ---------- */
  --border-hairline:1px; --border-thick:1.5px; --border-heavy:2px;

  /* ---------- Shadows (neutral, never accent-tinted) ---------- */
  --shadow-xs:  0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-sm:  0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.06);
  --shadow-md:  0 4px 8px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.05);
  --shadow-lg:  0 12px 20px -6px rgb(15 23 42 / 0.10), 0 4px 8px -4px rgb(15 23 42 / 0.06);
  --shadow-xl:  0 24px 40px -12px rgb(15 23 42 / 0.14), 0 8px 16px -8px rgb(15 23 42 / 0.08);
  --shadow-2xl: 0 40px 72px -16px rgb(15 23 42 / 0.20);
  --shadow-accent: 0 8px 24px -6px rgb(var(--accent-rgb) / 0.35);

  /* ---------- Z-index ---------- */
  --z-base:0; --z-sticky-nav:40; --z-dropdown:50; --z-overlay:60; --z-modal:70; --z-toast:80;

  /* ---------- 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);
  --duration-fast:120ms; --duration-normal:200ms; --duration-slow:320ms;

  /* ---------- Layout ---------- */
  --container-max:1200px; --container-prose:68ch; --nav-height:64px;
}

/* ============================ LIGHT THEME (default) ======================== */
:root, [data-theme="light"] {
  --bg-canvas:#ffffff; --bg-subtle:#f8fafc; --bg-muted:#f1f5f9;
  --surface:#ffffff; --surface-raised:#ffffff; --surface-sunken:#f8fafc;
  --border:#e2e8f0; --border-strong:#cbd5e1; --border-subtle:#f1f5f9;
  --text-primary:#0f172a; --text-secondary:#475569; --text-tertiary:#64748b;
  --text-disabled:#94a3b8; --text-on-accent:#ffffff; --text-inverse:#f8fafc;

  --success:#16a34a; --success-bg:#f0fdf4;
  --warning:#d97706; --warning-bg:#fffbeb;
  --danger:#dc2626;  --danger-bg:#fef2f2;
  --info:#2563eb;    --info-bg:#eff6ff;

  /* Atlas house indigo — overridden per product */
  --accent:#4f46e5; --accent-rgb:79 70 229; --accent-hover:#4338ca;
  --accent-soft:#eef2ff; --accent-text:#4f46e5; --accent-contrast:#ffffff;

  --focus-ring:var(--accent); --selection-bg:rgb(var(--accent-rgb) / 0.18);
}

/* ============================ DARK THEME =================================== */
[data-theme="dark"] {
  --bg-canvas:#0b1120; --bg-subtle:#0f172a; --bg-muted:#1e293b;
  --surface:#111a2e; --surface-raised:#16213b; --surface-sunken:#0b1120;
  --border:#1e293b; --border-strong:#334155; --border-subtle:#172033;
  --text-primary:#f1f5f9; --text-secondary:#cbd5e1; --text-tertiary:#94a3b8;
  --text-disabled:#64748b; --text-on-accent:#ffffff; --text-inverse:#0f172a;

  --success:#22c55e; --success-bg:#052e16;
  --warning:#f59e0b; --warning-bg:#3a2606;
  --danger:#ef4444;  --danger-bg:#3a0a0a;
  --info:#3b82f6;    --info-bg:#0b1f3a;

  --accent:#818cf8; --accent-rgb:129 140 248; --accent-hover:#a5b4fc;
  --accent-soft:#1e2547; --accent-text:#a5b4fc; --accent-contrast:#0b1120;

  --shadow-xs:0 1px 2px 0 rgb(0 0 0 / 0.30);
  --shadow-sm:0 1px 3px 0 rgb(0 0 0 / 0.40);
  --shadow-md:0 4px 8px -2px rgb(0 0 0 / 0.45);
  --shadow-lg:0 12px 20px -6px rgb(0 0 0 / 0.50);
  --shadow-xl:0 24px 40px -12px rgb(0 0 0 / 0.55);
  --shadow-2xl:0 40px 72px -16px rgb(0 0 0 / 0.65);

  --focus-ring:var(--accent); --selection-bg:rgb(var(--accent-rgb) / 0.30);
}

::selection { background: var(--selection-bg); }