/* ============================================================
   DESIGN TOKENS
   Single source of truth for all colours, spacing, and type.
   Change a token here — it updates everywhere.
   ============================================================ */

:root {

  /* ── Colour palette ───────────────────────────────────── */
  --color-bg:       #0A0A0A;
  --color-surface:  #141414;
  --color-surface-2:#1C1C1C;
  --color-surface-3:#242424;

  --color-teal:     #00B4A0;
  --color-teal-dim: rgba(0, 180, 160, 0.08);
  --color-teal-border: rgba(0, 180, 160, 0.3);

  --color-white:    #FFFFFF;
  --color-light:    #C0C0C0;
  --color-gray:     #808080;
  --color-border:   #2A2A2A;

  --color-danger:   #E05050;
  --color-danger-bg:#180E0E;
  --color-danger-border: #3A1A1A;

  --color-safe-bg:  #081A17;

  /* ── Typography ───────────────────────────────────────── */
  --font-family:    'Inter', system-ui, -apple-system, sans-serif;

  --font-size-xs:   0.6875rem;  /* 11px */
  --font-size-sm:   0.75rem;    /* 12px */
  --font-size-base: 0.875rem;   /* 14px */
  --font-size-md:   1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  2rem;       /* 32px */
  --font-size-4xl:  2.375rem;   /* 38px */
  --font-size-hero: 4.25rem;    /* 68px */

  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  --line-height-tight:  1.15;
  --line-height-snug:   1.3;
  --line-height-base:   1.6;
  --line-height-loose:  1.75;

  --letter-spacing-wide:    0.05em;
  --letter-spacing-wider:   0.08em;
  --letter-spacing-widest:  0.12em;

  /* ── 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 ───────────────────────────────────────────── */
  --container-max:  1440px;
  --container-pad:  5rem;       /* 80px — matches Figma */
  --border-radius:  6px;
  --border-radius-lg: 8px;
  --border-radius-pill: 100px;

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-teal: 0 0 32px rgba(0, 180, 160, 0.12);
}

/* ── Responsive token overrides ──────────────────────────── */
@media (max-width: 768px) {
  :root {
    --container-pad: 1.5rem;
    --font-size-hero: 2.75rem;
    --font-size-4xl:  1.875rem;
    --font-size-3xl:  1.625rem;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-hero: 2.25rem;
    --font-size-4xl:  1.625rem;
  }
}