/**
 * Black Bear AI - Design Tokens
 * Based on design-system.md v1.0
 * Color selection: Vermilion #E34234 (WCAG AA compliant on black)
 */

:root {
  /* Colors - Primary Palette */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-red-vermilion: #E34234; /* Primary red - 5.1:1 contrast on black (WCAG AA) */
  --color-gray: #666666; /* Footer text - 5.74:1 contrast on black (WCAG AA) */

  /* Colors - Alternative Reds (available but not used in Phase 1) */
  --color-red-burgundy: #800020; /* Decoration only - FAILS WCAG on black (1.94:1) */
  --color-red-pantone-485c: #DA291C; /* Alternative - 4.32:1 on black (AA large/UI) */

  /* Colors - Extended Accent (AI/intelligence contexts) */
  --color-blue-insight: #7399C6; /* Optional accent - 7.36:1 on black (WCAG AA), NOT primary palette */

  /* Typography - Font Family */
  --font-family-primary: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;

  /* Typography - Font Size */
  --text-xs: 0.75rem;   /* 12px - Footer legal text */
  --text-sm: 0.875rem;  /* 14px - Secondary text */
  --text-base: 1rem;    /* 16px - CTA link, standard body */
  --text-lg: 1.5rem;    /* 24px - Section headings */
  --text-xl: 2rem;      /* 32px - Mobile wordmark */
  --text-2xl: 3rem;     /* 48px - Desktop wordmark */

  /* Typography - Font Weight */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Spacing - 8-Point Grid System */
  --space-1: 0.5rem;    /* 8px - Minimal padding */
  --space-2: 1rem;      /* 16px - Standard padding */
  --space-3: 1.5rem;    /* 24px - Medium gaps */
  --space-4: 2rem;      /* 32px - Large gaps */
  --space-6: 3rem;      /* 48px - Extra-large gaps */
  --space-8: 4rem;      /* 64px - Maximum spacing */

  /* Line Height */
  --leading-tight: 1.1;     /* Large headings */
  --leading-snug: 1.3;      /* Section headings */
  --leading-relaxed: 1.5;   /* Body text, optimal readability */

  /* Spacing - Extended */
  --space-10: 5rem;           /* 80px */
  --space-12: 6rem;           /* 96px */
  --space-16: 8rem;           /* 128px */
  --space-20: 10rem;          /* 160px */

  /* Typography - Extended */
  --text-3xl: 3.5rem;         /* 56px */
  --text-4xl: 4rem;           /* 64px */

  /* Layout */
  --max-width: 1120px;
  --max-width-narrow: 720px;
  --nav-height: 80px;

  /* Transitions */
  --transition-fast: 150ms;
  --transition-base: 300ms;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Breakpoints (for reference in media queries) */
  /* Mobile: 0px - 767px (default) */
  /* Tablet: 768px+ */
  /* Desktop: 1024px+ (3-col layout) */
  /* Wide: 1440px+ */
}