:root {
    /* Primary — Lyra palette */
    --primary-0: #06141B;
    --primary-1: #11212D;
    --primary-2: #253745;
    --primary-3: #4A5C6A;
    --primary-4: #9ba8ab;
    --primary-5: #ccd0cf;
    --primary-6: #f3f3f3;

    /* Secondary — Green accent */
    --secondary-0: #064531;
    --secondary-1: #065F46;
    --secondary-2: #059669;
    --secondary-3: #10B981;
    --secondary-4: #34D399;
    --secondary-5: #A7F3D0;
    --secondary-6: #ECFDF5;

    /* Neutral */
    --gray: #ebebeb;
    --text-muted: #64748b;
    --text-body: #334155;
    --accent-soft: rgba(16, 185, 129, 0.1);

    /* Surfaces & shadows */
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 50px;

    /* Spacing scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-overlay: 1040;

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(16, 185, 129, 0.4);
}