/* ChugAx storefront palette. Legacy names are aliases for the shared design system. */
:root {
    color-scheme: dark;
    --site-bg: #0a0d14;
    --site-surface: #111622;
    --site-card: #141a28;
    --site-border: rgba(255,255,255,0.08);
    --site-text: #eef1f7;
    --site-secondary: #b4bccc;
    --site-muted: #8b94a7;
    --site-accent: #6ea8ff;
    --site-warm: #f2c46d;
    --category-shared: #6ea8ff;
    --category-daily: #b18cff;
    --category-private: #4fd1c5;
    --category-family: #4ade80;
    --category-personal: #f2c46d;
    --category-refill: #fb923c;
    --site-success: #4ade80;
    --site-warning: #fbbf24;
    --site-paper: #ffffff;
    --site-accent-soft: rgba(110,168,255,0.12);
    --site-backdrop: rgba(10,13,20,0.85);
    --site-shadow: 0 12px 32px rgba(0,0,0,0.24);
    --site-headline: linear-gradient(110deg, #eef1f7, #6ea8ff 62%, #f2c46d);
    --radius-card: 14px;
    --radius-button: 10px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --bg-primary: var(--site-bg);
    --bg-secondary: var(--site-surface);
    --bg-card: var(--site-card);
    --border-card: var(--site-border);
    --text-primary: var(--site-text);
    --text-secondary: var(--site-secondary);
    --accent-blue: var(--site-accent);
    --accent-cyan: var(--site-accent);
    --accent-purple: var(--site-accent);
    --accent-green: var(--site-success);
    --accent-orange: var(--site-warm);
    --accent-pink: var(--site-warm);
    --accent-red: var(--site-warning);
    --gradient-main: var(--site-accent);
    --gradient-card: var(--site-card);
    --gradient-action: var(--site-accent);
    --shadow-glow: var(--site-shadow);
    --bg: var(--site-bg);
    --panel: var(--site-card);
    --panel2: var(--site-surface);
    --line: var(--site-border);
    --text: var(--site-text);
    --muted: var(--site-secondary);
    --blue: var(--site-accent);
    --green: var(--site-success);
}