/* Design Tokens */
:root {
    /* Spacing Scale (8px grid) */
    --space-xs: 0.5rem;
    /* 8px */
    --space-sm: 1rem;
    /* 16px */
    --space-md: 1.5rem;
    /* 24px */
    --space-lg: 2rem;
    /* 32px */
    --space-xl: 3rem;
    /* 48px */
    --space-2xl: 4rem;
    /* 64px */
    --space-3xl: 6rem;
    /* 96px */
    --space-4xl: 8rem;
    /* 128px */
    --space-5xl: 12rem;
    /* 192px */

    /* Font Families */
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: system-ui, -apple-system, sans-serif;

    /* Font Sizes - fluid typography */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
    --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --text-2xl: clamp(2rem, 1.6rem + 2vw, 3rem);
    --text-3xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    --text-4xl: clamp(3rem, 2.5rem + 3vw, 5rem);
    --text-5xl: clamp(3.5rem, 3rem + 3.5vw, 6rem);

    /* Line Heights */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* Colors (Jobs-inspired) */
    /* Grayscale - Primary palette */
    --color-white: #FFFFFF;
    --color-gray-50: #FAFAFA;
    --color-gray-100: #F5F5F5;
    --color-gray-200: #E5E5E5;
    --color-gray-300: #D4D4D4;
    --color-gray-400: #A3A3A3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --color-gray-700: #404040;
    --color-gray-800: #262626;
    --color-gray-900: #171717;
    --color-black: #000000;

    /* Accent - Use sparingly for CTAs */
    --color-accent: #007AFF;
    /* Apple blue */
    --color-accent-hover: #0051D5;

    /* Semantic colors */
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);
    --color-text-tertiary: var(--color-gray-400);
    --color-bg-primary: var(--color-white);
    --color-bg-secondary: var(--color-gray-50);

    /* Breakpoints */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}