/* Design System Variables */

:root {
    /* Colors - Minimalistic palette */
    --color-primary: #1a1a1a;        /* Near black for text */
    --color-secondary: #666666;      /* Medium gray for secondary text */
    --color-accent: #2c2c2c;         /* Accent for hover states */
    --color-background: #ffffff;     /* Pure white background */
    --color-light-gray: #f5f5f5;     /* Light gray for subtle backgrounds */

    /* Typography - Public Sans */
    --font-body: "Public Sans", Arial, sans-serif;
    --font-heading: "Public Sans", Arial, sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* Font sizes - Responsive scale */
    --font-size-base: 16px;
    --font-size-small: 0.875rem;     /* 14px */
    --font-size-body: 1rem;          /* 16px */
    --font-size-h4: 1.25rem;         /* 20px */
    --font-size-h3: 1.5rem;          /* 24px */
    --font-size-h2: 1.75rem;         /* 28px */
    --font-size-h1: 2.25rem;         /* 36px */
    --font-size-hero: 4rem;          /* 64px */

    /* Spacing - 8px base system */
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 1rem;      /* 16px */
    --spacing-md: 2rem;      /* 32px */
    --spacing-lg: 3rem;      /* 48px */
    --spacing-xl: 4rem;      /* 64px */
    --spacing-xxl: 6rem;     /* 96px */

    /* Layout */
    --max-width-content: 1200px;
    --max-width-text: 700px;
    --border-radius: 0;              /* No rounded corners for minimalism */

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Dark mode - Lights Off */
[data-theme="dark"] {
    --color-primary: #e5e5e5;        /* Light text */
    --color-secondary: #999999;      /* Light gray for secondary text */
    --color-accent: #d3d3d3;         /* Light accent for hover states */
    --color-background: #1a1a1a;     /* Dark background */
    --color-light-gray: #2c2c2c;     /* Dark gray for subtle backgrounds */
}