:root {
    --roe-echo-void: #0a0b14;
    --roe-realm-indigo: #261d40;
    --roe-rift-violet: #7554d8;
    --roe-echo-cyan: #67ddeb;
    --roe-ancient-gold: #d8aa55;
    --roe-moonbone: #f0e9d6;

    --roe-display: Palatino, 'Palatino Linotype', Georgia, serif;
    --roe-ui: 'Avenir Next', Avenir, Inter, Arial, sans-serif;
    --roe-background: #0a0b14;
    --roe-surface: #171425;
    --roe-primary: #d8aa55;
    --roe-secondary: #f0e9d6;
    --roe-accent: #67ddeb;
    --roe-accent-two: #7554d8;
    --roe-ash: #8e92a3;
    --roe-line: #2b2d42;

    --roe-rift-gradient: linear-gradient(135deg, var(--roe-accent), var(--roe-accent-two));
    --roe-panel-gradient: linear-gradient(145deg, var(--roe-surface), var(--roe-background));
    --roe-gold-glow: 0 0 28px color-mix(in srgb, var(--roe-primary) 18%, transparent);
    --roe-focus-ring: 0 0 0 2px var(--roe-background), 0 0 0 4px var(--roe-accent);
}