/* Design tokens - web glass approximation, not Apple Liquid Glass */

:root {
    --space-900: #07070f;
    --space-700: #12121f;
    --chrome-100: rgba(255, 255, 255, 0.92);
    --chrome-400: rgba(255, 255, 255, 0.55);
    --accent-rose: #ff4757;
    --accent-rose-soft: #ff6b81;
    --accent-violet: #a78bfa;
    --accent-gold: #fbbf24;
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-highlight: rgba(255, 255, 255, 0.22);
    --shadow-tint: rgba(7, 7, 15, 0.45);

    --sky-1: #07070f;
    --sky-2: #12121f;
    --sky-3: #1a1a2e;

    --radius-card: 20px;
    --radius-btn: 14px;
    --radius-pill: 999px;

    --nav-height: 64px;
    --heart-size: 160px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-theme: 0.08s linear;
    --night-factor: 0;
    --transition-ui: 0.3s var(--ease-out);
}

body.theme-morning {
    --sky-1: #2d1b24;
    --sky-2: #5c3a4a;
    --sky-3: #c97b63;
    --chrome-100: rgba(45, 25, 30, 0.95);
    --chrome-400: rgba(45, 25, 30, 0.6);
    --glass-bg: rgba(255, 240, 230, 0.35);
    --glass-border: rgba(255, 255, 255, 0.45);
}

body.theme-day {
    --sky-1: #5b8def;
    --sky-2: #8ec5fc;
    --sky-3: #e0f2fe;
    --chrome-100: rgba(25, 40, 60, 0.92);
    --chrome-400: rgba(25, 40, 60, 0.55);
    --glass-bg: rgba(255, 255, 255, 0.5);
    --glass-border: rgba(255, 255, 255, 0.65);
}

body.theme-sunset {
    --sky-1: #2d1320;
    --sky-2: #7b2d4e;
    --sky-3: #c45c26;
}

body.theme-night {
    --sky-1: #07070f;
    --sky-2: #12121f;
    --sky-3: #1a1a2e;
}

body[data-brightness="light"] {
    --chrome-100: rgba(20, 30, 45, 0.92);
    --chrome-400: rgba(20, 30, 45, 0.58);
    --shadow-tint: rgba(20, 30, 45, 0.12);
}

body[data-brightness="dark"] {
    --chrome-100: rgba(255, 255, 255, 0.92);
    --chrome-400: rgba(255, 255, 255, 0.55);
}

@media (max-width: 480px) {
    :root {
        --heart-size: 136px;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    :root {
        --heart-size: 150px;
    }
}

@media (min-width: 768px) {
    :root {
        --heart-size: 180px;
    }
}

@media (prefers-reduced-transparency: reduce) {
    :root {
        --glass-bg: rgba(18, 18, 31, 0.94);
    }
    body.theme-day,
    body.theme-morning {
        --glass-bg: rgba(255, 255, 255, 0.94);
    }
}