/* ============================================================
   Design tokens — single source of truth for color, type, radius
   ============================================================ */

:root {
  --color-bg:           #fcfcfe;
  --color-surface:      #ffffff;
  --color-surface-alt:  #f6f7fb;
  --color-text:         #1a202c;
  --color-text-muted:   #4a5568;
  --color-text-subtle:  #718096;
  --color-border:       #e2e8f0;

  --color-accent-1:     #6c63ff;
  --color-accent-2:     #07c6ac;
  --color-accent-warm:  #a8b5ff;
  --color-accent-cool:  #c4b5e8;

  --color-link:         #5a52d6;
  --color-link-hover:   #07c6ac;

  --color-success:      #34d399;
  --color-danger:       #ef4444;

  --font-sans:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:  'DM Serif Display', Georgia, serif;
  --font-mono:   ui-monospace, SFMono-Regular, Menlo, monospace;

  --size-1:   .25rem;
  --size-2:   .5rem;
  --size-3:   .75rem;
  --size-4:   1rem;
  --size-5:   1.5rem;
  --size-6:   2rem;
  --size-8:   3rem;
  --size-10:  4rem;
  --size-12:  6rem;

  --radius-sm:  .5rem;
  --radius-md:  .85rem;
  --radius-lg:  1.25rem;
  --radius-pill: 999px;

  --shadow-sm:  0 4px 12px rgba(15, 17, 25, .06);
  --shadow-md:  0 12px 30px rgba(15, 17, 25, .10);
  --shadow-lg:  0 22px 50px rgba(15, 17, 25, .14);

  --max-width: 1200px;

  --duration-fast:   .18s;
  --duration:        .3s;
  --duration-slow:   .6s;
  --easing:          cubic-bezier(.2, .9, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           #0f1117;
    --color-surface:      #181b24;
    --color-surface-alt:  #1f2330;
    --color-text:         #f1f5f9;
    --color-text-muted:   #cbd5e1;
    --color-text-subtle:  #94a3b8;
    --color-border:       #2a2f3d;
    --color-link:         #a8b5ff;
    --color-link-hover:   #07c6ac;
    --shadow-sm:  0 4px 12px rgba(0, 0, 0, .35);
    --shadow-md:  0 12px 30px rgba(0, 0, 0, .45);
    --shadow-lg:  0 22px 50px rgba(0, 0, 0, .55);
  }
}