/* tokens.css — design variables */

:root {
  /* palette */
  --color-bg:         #fafaf9;
  --color-surface:    #ffffff;
  --color-border:     #e2e0dc;
  --color-border-soft:#eeece8;
  --color-text:       #1c1917;
  --color-text-muted: #78716c;
  --color-text-light: #a8a29e;
  --color-accent:     #2563eb;
  --color-accent-hover:#1d4ed8;
  --color-accent-soft:#eff6ff;
  --color-danger:     #dc2626;
  --color-danger-soft:#fef2f2;
  --color-success:    #16a34a;
  --color-success-soft:#f0fdf4;
  --color-warning:    #d97706;
  --color-warning-soft:#fffbeb;

  /* typography */
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl:2rem;
  --line-height:  1.6;

  /* spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  /* layout */
  --max-width:   72rem;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:   0 2px 8px rgba(0,0,0,0.08);
  --nav-height:  3.5rem;
}