/* Momentran V2 — Design System Variables */
/* Google Stitch inspired: clean lines, layered surfaces, subtle depth */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
    /* Surface layers (dark default) */
    --bg: #0B0D14;
    --bg2: #111320;
    --bg3: #181B28;
    --bg4: #222638;
    --bg5: #2E3348;

    /* Text hierarchy */
    --text: #F0F2F8;
    --text2: #A8B0C8;
    --text3: #6B7294;

    /* Accents */
    --accent: #14B8A6;
    --accent2: #06B6D4;
    --accent-glow: rgba(20, 184, 166, 0.15);
    --amber: #F59E0B;
    --coral: #F43F5E;
    --green: #22C55E;

    /* Surfaces & glass */
    --nav-bg: rgba(17, 19, 32, 0.92);
    --glass-bg: rgba(24, 27, 40, 0.65);
    --glass-border: rgba(255, 255, 255, 0.06);
    --card-bg: rgba(24, 27, 40, 0.5);

    /* Shadows */
    --shadow-1: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-2: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-3: 0 12px 40px rgba(0,0,0,0.5);

    /* Status backgrounds */
    --amber-bg: rgba(245,158,11,0.1);
    --coral-bg: rgba(244,63,94,0.1);
    --green-bg: rgba(34,197,94,0.1);

    /* Typography */
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

    /* Spacing */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
    --duration-slow: 0.4s;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Light theme */
[data-theme="light"] {
    --bg: #F5F7FA;
    --bg2: #FFFFFF;
    --bg3: #EDF0F5;
    --bg4: #DDE2EB;
    --bg5: #C8D0DC;

    --text: #1A1D28;
    --text2: #4A5168;
    --text3: #7C849C;

    --accent: #0D9488;
    --accent2: #0891B2;
    --accent-glow: rgba(13,148,136,0.1);

    --nav-bg: rgba(255,255,255,0.92);
    --glass-bg: rgba(255,255,255,0.7);
    --glass-border: rgba(0,0,0,0.06);
    --card-bg: rgba(255,255,255,0.8);

    --shadow-1: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-2: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-3: 0 12px 40px rgba(0,0,0,0.12);

    --amber-bg: rgba(245,158,11,0.08);
    --coral-bg: rgba(244,63,94,0.08);
    --green-bg: rgba(34,197,94,0.08);
}