/* ══════════════════════════════════════════════════════════════════
   SOVEREIGN GRID — Design Tokens
   The single source of truth for colors, typography, spacing,
   radii, shadows, and motion across all ecosystem sites.
   
   Usage: <link rel="stylesheet" href="/path/to/tokens.css"/>
   All sites MUST import this file before their own styles.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── COLOR: Backgrounds ─── */
  --color-void:          hsl(220, 25%, 5%);     /* Deepest background */
  --color-surface-0:     hsl(220, 22%, 7%);     /* Page background */
  --color-surface-1:     hsl(220, 20%, 10%);    /* Card backgrounds */
  --color-surface-2:     hsl(220, 18%, 14%);    /* Elevated surfaces */
  --color-surface-3:     hsl(220, 16%, 18%);    /* Hover states, inputs */
  --color-surface-4:     hsl(220, 14%, 22%);    /* Active states */

  /* ── COLOR: Borders ─── */
  --color-border:        hsla(215, 20%, 30%, 0.4);
  --color-border-hover:  hsla(152, 68%, 48%, 0.4);
  --color-border-subtle: hsla(215, 20%, 24%, 0.3);

  /* ── COLOR: Text ─── */
  --color-text-primary:   hsl(210, 20%, 93%);
  --color-text-secondary: hsl(215, 14%, 62%);
  --color-text-tertiary:  hsl(215, 10%, 44%);
  --color-text-inverse:   hsl(220, 25%, 5%);

  /* ── COLOR: Brand — Primary (Emerald/Cyan) ─── */
  --color-accent:        hsl(152, 68%, 48%);
  --color-accent-hover:  hsl(152, 68%, 54%);
  --color-accent-soft:   hsla(152, 68%, 48%, 0.10);
  --color-accent-glow:   hsla(152, 68%, 48%, 0.25);
  --color-accent-strong: hsla(152, 68%, 48%, 0.40);

  /* ── COLOR: Semantic ─── */
  --color-success:       hsl(152, 68%, 42%);
  --color-warning:       hsl(38, 80%, 55%);
  --color-danger:        hsl(350, 80%, 55%);
  --color-info:          hsl(210, 70%, 55%);
  --color-purple:        hsl(265, 60%, 60%);

  /* ── COLOR: Semantic Soft ─── */
  --color-success-soft:  hsla(152, 68%, 42%, 0.10);
  --color-warning-soft:  hsla(38, 80%, 55%, 0.10);
  --color-danger-soft:   hsla(350, 80%, 55%, 0.10);
  --color-info-soft:     hsla(210, 70%, 55%, 0.10);

  /* ── TYPOGRAPHY: Font Families ─── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-mono:    'IBM Plex Mono', 'Fira Code', 'Consolas', monospace;

  /* ── TYPOGRAPHY: Font Sizes ─── */
  --text-xs:   0.72rem;    /* 11.5px — labels, meta */
  --text-sm:   0.85rem;    /* 13.6px — body small */
  --text-base: 1rem;       /* 16px — body */
  --text-lg:   1.1rem;     /* 17.6px — body large */
  --text-xl:   1.25rem;    /* 20px — h4 */
  --text-2xl:  1.5rem;     /* 24px — h3 */
  --text-3xl:  1.875rem;   /* 30px — h2 mobile */
  --text-4xl:  2.25rem;    /* 36px — h2 */
  --text-5xl:  3rem;       /* 48px — h1 */
  --text-6xl:  3.75rem;    /* 60px — hero */

  /* ── TYPOGRAPHY: Line Heights ─── */
  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.7;

  /* ── TYPOGRAPHY: Letter Spacing ─── */
  --tracking-tight:   -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* ── TYPOGRAPHY: Font Weights ─── */
  --weight-light:     300;
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ── SPACING ─── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── LAYOUT ─── */
  --content-max:  1100px;
  --content-wide: 1280px;
  --content-narrow: 720px;

  /* ── BORDER RADIUS ─── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── SHADOWS ─── */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-lg:   0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 30px hsla(152, 68%, 48%, 0.12);
  --shadow-glow-strong: 0 0 40px hsla(152, 68%, 48%, 0.20);

  /* ── MOTION ─── */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-normal:  250ms;
  --dur-slow:    400ms;
  --dur-reveal:  600ms;

  /* ── Z-INDEX ─── */
  --z-base:    1;
  --z-card:    10;
  --z-nav:     100;
  --z-modal:   1000;
  --z-toast:   10000;
}

/* ══════════════════════════════════════════════════════════════════
   RESET — Minimal, opinionated reset
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-surface-0);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

img, video, svg {
  max-width: 100%;
  display: block;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}