/* CSS Custom Properties - Design Tokens */

:root {
    /* Colors */
    --color-primary: #2563eb;        /* Blue for accents and interactive elements */
    --color-text: #1f2937;           /* Dark gray for primary text */
    --color-text-light: #6b7280;     /* Light gray for secondary text */
    --color-background: #ffffff;     /* White background */
    --color-surface: #f9fafb;        /* Light gray for surfaces (cards, badges) */
    --color-border: #e5e7eb;         /* Border color */
    
    /* Typography */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    
    /* Font Sizes */
    --font-size-h1: 3rem;            /* 48px - Hero name */
    --font-size-h2: 2rem;            /* 32px - Hero role */
    --font-size-body: 1.125rem;      /* 18px - Hero tagline */
    --font-size-small: 1rem;         /* 16px - Stack badges */
    
    /* Font Weights */
    --font-weight-bold: 700;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    
    /* Spacing */
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 1rem;     /* 16px */
    --spacing-md: 1.5rem;   /* 24px */
    --spacing-lg: 2rem;     /* 32px */
    --spacing-xl: 3rem;     /* 48px */
    --spacing-2xl: 4rem;    /* 64px */
    
    /* Breakpoints (for reference in media queries) */
    --breakpoint-mobile: 320px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1440px;
    
    /* Transitions */
    --transition-default: 0.3s ease;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-full: 50%;
}

/* Base Typography */
body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-normal);
    color: var(--color-text);
    background-color: var(--color-background);
}