/* Crystal City - CSS variables (dark premium liquid glass) */
:root {
    /* Palette - deep space + electric crystal */
    --bg-deep: #05070e;
    --bg-elevated: #0b0d1a;
    --bg-elevated-2: #10122a;
    --bg-overlay: rgba(15, 18, 40, 0.85);

    --surface-1: rgba(255, 255, 255, 0.04);
    --surface-2: rgba(255, 255, 255, 0.07);
    --surface-3: rgba(255, 255, 255, 0.11);
    --border-1: rgba(255, 255, 255, 0.10);
    --border-2: rgba(255, 255, 255, 0.16);
    --border-glow: rgba(133, 220, 255, 0.35);

    --text-1: rgba(255, 255, 255, 0.98);
    --text-2: rgba(230, 236, 255, 0.72);
    --text-3: rgba(210, 220, 255, 0.48);
    --text-muted: rgba(180, 195, 240, 0.32);

    /* Accents (electric crystal palette) */
    --accent-1: #7ce7ff;   /* cyan crystal */
    --accent-2: #a880ff;   /* violet ion */
    --accent-3: #ffb85e;   /* solar gold */
    --accent-4: #62f0b0;   /* mint pulse */
    --danger: #ff6d8b;
    --warning: #ffcf5e;
    --success: #62f0b0;

    /* Currency icons */
    --coin: #ffcf5e;
    --token: #a880ff;
    --crystal: #7ce7ff;
    --energy: #62f0b0;

    /* Glass */
    --glass-blur: 22px;
    --glass-sat: 150%;

    /* Radii */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-2xl: 36px;

    /* Shadows */
    --shadow-1: 0 6px 20px rgba(0, 0, 0, 0.28);
    --shadow-2: 0 14px 46px rgba(0, 0, 0, 0.42);
    --shadow-glow: 0 0 30px rgba(124, 231, 255, 0.28);

    /* Motion */
    --dur-fast: 140ms;
    --dur: 240ms;
    --dur-slow: 420ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --nav-height: 68px;
    --topbar-height: 60px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);

    /* Fonts */
    --font-body: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}

[data-theme="dark"] {
    color-scheme: dark;
}