/* ===== CSS Variables ===== */
:root {
    --color-void: #0A0E14;
    --color-deep: #131920;
    --color-surface: #1A2332;
    --color-elevated: #232E3F;
    --color-border: rgba(255, 255, 255, 0.1);

    --color-primary: #00D9FF;
    --icon-stroke: 1.5;
    --color-primary-dim: #00B4D4;
    --color-accent: #7B61FF;
    --color-yellow: #FFCE00;
    /* Palo Alto yellow */
    --color-yellow-dark: #E6B800;
    --color-orange: #FF5A31;
    /* Palo Alto orange */
    --color-orange-dark: #E64A26;
    --color-success: #00FF94;
    --color-warning: #FFB800;
    --color-critical: #FF3366;

    --color-text-primary: #F4F7FC;
    --color-text-secondary: #A8B3C7;
    --color-text-tertiary: #6B7A92;

    --font-display: 'Archivo', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}