:root { /* ========================================================================== DESIGN TOKENS
- Auto-generated from design_tokens.json
========================================================================== */ /* Colors */  --color-primary: #1F4AE7;  --color-primary-hover: #1a3fc5;  --color-secondary: #ffffff;  --color-secondary-hover: #f2f2f2;  --color-text-main: #333333;  --color-text-light: #5a6978;  --color-link: #0077cc;  --color-background-light: #f7f8f9;  --color-border: #cccccc;  --color-success: #2e7d32;  --color-success-bg: #e8f5e9;  --color-error: #c62828;  --color-error-bg: #ffebee;  --color-info: #0d47a1;  --color-info-bg: #e3f2fd;  /* Fonts */  --font-base: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;  --font-serif: Georgia, Times, "Times New Roman", serif;  --font-mono: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;  /* Font Sizes (fluid with clamp) */ 
--font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); 
--font-size-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem); 
--font-size-base: clamp(1rem, 0.95rem + 0.5vw, 1.125rem); 
--font-size-lg: clamp(1.125rem, 1.1rem + 0.8vw, 1.25rem); 
--font-size-xl: clamp(1.25rem, 1.2rem + 1.2vw, 1.5rem); 
--font-size-2xl: clamp(1.5rem, 1.4rem + 2vw, 2rem); 
--font-size-3xl: clamp(2rem, 1.8rem + 3vw, 3rem); 
--font-size-4xl: clamp(2.5rem, 2.2rem + 5vw, 4.5rem);  /* Font Weights */  --font-weight-normal: 400;  --font-weight-medium: 500;  --font-weight-bold: 700;  /* Base Spacing
Scale */  --space-xs: 5px;  --space-sm: 10px;  --space-md: 20px;  --space-lg: 40px;  --space-xl: 60px;  --space-2xl: 100px; 
/* Semantic Spacing (use these for consistency) */  --spacing-inline: var(--space-xs);  --spacing-element: var(--space-sm);  --spacing-component: var(--space-md);  --spacing-section-gap: var(--space-lg);  --spacing-section-padding: var(--space-xl);  --spacing-hero-padding: var(--space-2xl); 
/* Typography Scale (semantic aliases) */  --text-body: var(--font-size-base);  --text-caption: var(--font-size-xs);  --text-meta: var(--font-size-sm);  --text-lead: var(--font-size-lg);  --text-title-sm: var(--font-size-xl);  --text-title-md: var(--font-size-2xl);  --text-title-lg: var(--font-size-3xl);  --text-title-hero: var(--font-size-4xl);  /* Border Radius */  --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 12px;  --radius-pill: 9999px;  /* Layout */  --layout-header-height-mobile: 60px;  --layout-header-height-desktop: 70px;  --layout-content-width: 1024px;  --layout-content-narrow: 700px;  --layout-page-gutter: var(--space-md);  --layout-flex-min-sm: 200px;  --layout-flex-min-md: 250px;  --layout-flex-min-lg: 300px;  --layout-icon-sm: 28px;  --layout-icon-md: 40px;  --layout-icon-lg: 50px;  }