/* ============================================
   DESIGN SYSTEM
   Extracted from SVG designs
   ============================================ */

/* ----------------------
   COLOR TOKENS
   ---------------------- */
:root {
  /* Background Colors */
  --bg-primary: #e3e3e3;      /* Main background */
  --bg-secondary: #efefef;     /* Secondary background */
  --bg-tertiary: #f5f5f5;     /* Tertiary background */
  
  /* Text Colors */
  --text-primary: #000;        /* Main text */
  --text-secondary: #4d4d4d;   /* Secondary text */
  --text-tertiary: #666;       /* Tertiary text */
  --text-muted: #8a8a8a;      /* Muted text */
  
  /* Border/Stroke Colors */
  --border: #cfd3d8;          /* Border color */
  --stroke: #000;             /* Stroke color */
  
  /* Accent Colors */
  --accent: #000;              /* Accent color */
  
  /* Legacy colors (for compatibility) */
  --s1-bg: var(--bg-primary);
  --s2-bg: var(--bg-secondary);
  --s3-bg: #cccccc;
  --s4-bg: #e1e1e1;
  --ink: var(--text-primary);
  --muted: var(--text-muted);
}

/* ----------------------
   TYPOGRAPHY TOKENS
   ---------------------- */
:root {
  /* Font Family */
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  /* Font Sizes (from SVG) */
  --font-size-xs: 12.11px;      /* 12.11px - Small text */
  --font-size-sm: 16px;          /* Base size */
  --font-size-md: 22.68px;      /* 22.68px - Medium headings */
  --font-size-lg: 37.16px;       /* 37.16px - Large headings */
  --font-size-xl: 56.69px;      /* 56.69px - Extra large headings */
  --font-size-hero: clamp(48px, 6.8vw, 112px); /* Hero title */
  
  /* Line Heights */
  --line-height-tight: 1.05;
  --line-height-normal: 1.6;
  
  /* Letter Spacing (negative values from SVG) */
  --letter-spacing-tight: -0.06em;
  --letter-spacing-close: -0.04em;
  --letter-spacing-medium: -0.03em;
  --letter-spacing-normal: -0.02em;
  --letter-spacing-loose: -0.01em;
  --letter-spacing-none: 0em;
}

/* ----------------------
   SPACING TOKENS
   ---------------------- */
:root {
  /* Spacing Scale (consistent 4px base) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  
  /* Container */
  --container-max: 1180px;
  --container-padding: clamp(16px, 3vw, 40px);
  
  /* Header */
  --header-height: 64px;
  
  /* Gaps */
  --gap-sm: 10px;
  --gap-md: 20px;
  --gap-lg: 60px;
  --gap-xl: 80px;
  --gap-2xl: 120px;
}

/* ----------------------
   COMPONENT TOKENS
   ---------------------- */
:root {
  /* Corner Crosses */
  --corner-size: 24px;
  --corner-stroke: 2px;
  --corner-offset: -12px;
  
  /* Borders */
  --border-width: 1px;
  --border-color: var(--border);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ----------------------
   UTILITY CLASSES
   ---------------------- */
.font-light { font-weight: var(--font-weight-light); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-bold { font-weight: var(--font-weight-bold); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }

.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }

/* ----------------------
   RESPONSIVE UTILITIES
   ---------------------- */
@media (max-width: 900px) {
  :root {
    --font-size-md: 20px;
    --font-size-lg: 32px;
    --font-size-xl: 48px;
    --gap-lg: 40px;
  }
}