/* ========================================
   Design Tokens — Single source of truth
   Starter Kit — Neutral slate palette
   Replace these values in Phase 8 with the project's brand tokens.
   ======================================== */
:root {
  /* Colors — starter defaults (override per project) */
  --color-primary: #334155;
  --color-primary-dark: #0f172a;
  --color-accent: #6366f1;
  --color-accent-text: #4338ca;       /* WCAG AA on white — kickers, labels */
  --color-success: #4caf50;
  --color-warning: #f59e0b;
  --color-white: #ffffff;
  --color-bg: #f8fafc;
  --color-bg-alt: #f1f5f9;
  --color-text: #0f172a;
  --color-muted: #64748b;
  --color-border: #e2e8f0;

  /* Surface + semantic roles — point at primitives above */
  --color-surface: var(--color-white);
  --color-light: var(--color-bg-alt);
  --color-dark-text: var(--color-bg);
  --nav-bg: rgba(15, 23, 42, 0.98);
  --footer-bg: var(--color-primary-dark);

  /* Typography — System fonts. Replace in Phase 8 with project fonts. */
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Surface texture — subtle noise for dark sections (nav, footer) */
  --surface-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");

  /* Shape */
  --radius-card: 16px;
  --radius-button: 999px;
  --radius-pill: 999px;
  --radius-inner: 10px;
  --shadow-card: 0 2px 8px rgba(51, 65, 85, 0.06);
  --shadow-hover: 0 8px 24px rgba(51, 65, 85, 0.1);
  --transition: 0.2s ease;

  /* Layout */
  --max-width: 960px;
  --content-width: 960px;
  --section-padding: 4rem;
  --side-padding: 2rem;
  --card-gap: 1.5rem;
  --nav-height: 4.5rem;
}

@media (max-width: 1024px) {
  :root {
    --section-padding: 4rem;
    --card-gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding: 3rem;
    --side-padding: 1.25rem;
  }
}