/* ─── Contivo Design Tokens ────────────────────────────────────────────────
   Import this file first in every page; it exposes all CSS custom properties.
   ──────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand palette ───────────────────────────────────────────────────── */
  --c-pink:      #F2308B;
  --c-purple:    #692CBF;
  --c-magenta:   #9916A5;
  --c-indigo:    #280DD9;
  --c-teal:      #03C8BF;

  /* ── Semantic roles ──────────────────────────────────────────────────── */
  --c-primary:   var(--c-indigo);
  --c-accent:    var(--c-pink);
  --c-secondary: var(--c-purple);
  --c-success:   var(--c-teal);
  --c-highlight: var(--c-magenta);

  /* ── Neutrals ────────────────────────────────────────────────────────── */
  --c-bg:        #0B0B1A;
  --c-surface:   #14142B;
  --c-surface-2: #1E1E3A;
  --c-text:      #F4F4FA;
  --c-text-dim:  #B8B8D1;
  --c-border:    #2A2A4D;

  /* ── Gradients ───────────────────────────────────────────────────────── */
  --grad-hero:   linear-gradient(135deg, var(--c-indigo) 0%, var(--c-magenta) 50%, var(--c-pink) 100%);
  --grad-accent: linear-gradient(90deg, var(--c-teal), var(--c-purple));
  --grad-subtle: linear-gradient(180deg, var(--c-surface) 0%, var(--c-bg) 100%);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── Spacing ─────────────────────────────────────────────────────────── */
  --space:    8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-6:  48px;
  --space-8:  64px;
  --space-12: 96px;

  /* ── Shape ───────────────────────────────────────────────────────────── */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-full: 9999px;

  /* ── Elevation ───────────────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 20px 40px -10px rgba(40, 13, 217, 0.35);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}