:root {
    /* Background colors */
    --color-bg-primary: #0a0a0a;
    --color-bg-card: #111111;
    --color-bg-card-alt: #1a1a1a;
    --color-bg-elevated: #1a1a1a;

    /* Accent colors */
    --color-accent: #C26D28;
    --color-accent-hover: #a85a20;
    --color-accent-light: rgba(194, 109, 40, 0.1);
    --color-accent-medium: rgba(194, 109, 40, 0.2);

    /* Text colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.7);
    --color-text-muted: rgba(255, 255, 255, 0.5);
    --color-text-faint: rgba(255, 255, 255, 0.3);

    /* Border colors */
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-hover: rgba(255, 255, 255, 0.25);
    --color-border-accent: rgba(194, 109, 40, 0.3);

    /* Typography */
    --font-primary: 'Montserrat', sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Font sizes — matched to Tailwind v4 --text-* scale */
    --font-size-xs: 0.75rem;      /* text-xs */
    --font-size-sm: 0.875rem;     /* text-sm */
    --font-size-base: 1rem;       /* text-base */
    --font-size-md: 1.125rem;     /* text-lg */
    --font-size-lg: 1.25rem;      /* text-xl */
    --font-size-xl: 1.5rem;       /* text-2xl */
    --font-size-2xl: 1.875rem;    /* text-3xl (was 2rem) */
    --font-size-3xl: 2.25rem;     /* text-4xl (was 2.5rem) */
    --font-size-4xl: 3rem;        /* text-5xl */
    --font-size-5xl: 3.75rem;     /* text-6xl (was 3.5rem) */

    /* Line heights — matched to Tailwind v4 --leading-* */
    --line-height-tight: 1.25;    /* leading-tight (was 1.2) */
    --line-height-snug: 1.375;    /* leading-snug (was 1.35) */
    --line-height-normal: 1.5;    /* leading-normal (was 1.6) */
    --line-height-relaxed: 1.625; /* leading-relaxed (was 1.75) */

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-section: 64px;

    /* Layout */
    --container-max-width: 1280px;
    --container-padding: 16px;
    --header-height: 80px;

    /* Border radius — matched to Tailwind v4 --radius-* */
    --radius-sm: 0.25rem;   /* 4px, same */
    --radius-md: 0.375rem;  /* 6px (was 8px) */
    --radius-lg: 0.5rem;    /* 8px (was 12px) */
    --radius-xl: 0.75rem;   /* 12px (was 16px) */
    --radius-full: 9999px;

    /* Shadows — matched to Tailwind v4 shadow-* utilities */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* Transitions — matched to Tailwind v4 defaults + duration-* */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index layers */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 1000;
    --z-mobile-menu: 1100;
    --z-overlay: 1200;
    --z-modal: 1300;

    /* Light theme colors (for sections with white/gray backgrounds) */
    --color-light-bg: #ffffff;
    --color-light-bg-alt: #f9fafb;
    --color-light-text-primary: #111827;
    --color-light-text-secondary: #374151;
    --color-light-text-muted: #6b7280;
    --color-light-border: #e5e7eb;
    --color-light-border-hover: #d1d5db;
    --color-light-card-bg: #ffffff;
    --color-light-input-bg: #f9fafb;

    /* Breakpoints (for reference, actual usage in media queries) */
    /* --bp-sm: 640px; */
    /* --bp-md: 768px; */
    /* --bp-lg: 1024px; */
    /* --bp-xl: 1280px; */
}