/* ==========================================================================
   Design Tokens - LLRI
   All colors, fonts, spacing, and other reusable values
   ========================================================================== */

:root {
    /* Colors - Primary */
    --color-primary: #3d5a80;
    --color-primary-light: #4a6d99;
    --color-primary-dark: #2c4460;
    
    /* Colors - Accent */
    --color-accent: #98c1d9;
    --color-accent-subtle: #e8f2f8;
    
    /* Colors - Secondary */
    --color-lime: #b8d4a8;
    --color-lime-subtle: #e8f2e4;
    --color-warning: #e8d4a8;
    --color-warning-subtle: #faf6ed;
    
    /* Colors - Backgrounds */
    --color-bg: #f8f9fb;
    --color-bg-alt: #eef1f5;
    --color-surface: #ffffff;
    
    /* Colors - Borders */
    --color-border: #d8dde6;
    --color-border-light: #e8ecf2;
    
    /* Colors - Text */
    --color-text: #1a2332;
    --color-text-muted: #5a6577;
    --color-text-light: #8892a2;
    
    /* Typography */
    --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Consolas', 'Monaco', monospace;
    
    /* Font Sizes */
    --text-xs: 0.6875rem;    /* 11px */
    --text-sm: 0.8125rem;    /* 13px */
    --text-base: 0.875rem;   /* 14px */
    --text-md: 0.9375rem;    /* 15px */
    --text-lg: 1.0625rem;    /* 17px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 2rem;        /* 32px */
    --text-4xl: 2.5rem;      /* 40px */
    
    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    
    /* Spacing */
    --space-xs: 0.25rem;     /* 4px */
    --space-sm: 0.5rem;      /* 8px */
    --space-md: 1rem;        /* 16px */
    --space-lg: 1.5rem;      /* 24px */
    --space-xl: 2rem;        /* 32px */
    --space-2xl: 3rem;       /* 48px */
    --space-3xl: 4rem;       /* 64px */
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(26, 35, 50, 0.04);
    --shadow-md: 0 4px 12px rgba(26, 35, 50, 0.06);
    --shadow-lg: 0 8px 32px rgba(26, 35, 50, 0.08);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* Layout */
    --nav-height: 72px;
    --max-width: 1100px;
    --content-width: 720px;
}