/* Base styles — iOS 26 Liquid Glass Design System */
:root {
    /* Core palette */
    --color-primary: #007aff;
    --color-primary-dark: #0056cc;
    --color-primary-light: rgba(0, 122, 255, 0.1);
    --color-secondary: #5856d6;
    --color-secondary-light: rgba(88, 86, 214, 0.1);
    --color-success: #30d158;
    --color-success-light: rgba(48, 209, 88, 0.1);
    --color-warning: #ff9f0a;
    --color-warning-light: rgba(255, 159, 10, 0.1);
    --color-error: #ff3b30;
    --color-error-light: rgba(255, 59, 48, 0.1);
    --color-link: #007aff;

    /* Backgrounds */
    --bg-primary: #f9fafb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f5f6fa;

    /* Liquid Glass surfaces */
    --bg-glass: rgba(255, 255, 255, 0.72);
    --bg-glass-thick: rgba(255, 255, 255, 0.88);
    --bg-glass-thin: rgba(255, 255, 255, 0.45);
    --bg-glass-dark: rgba(0, 0, 0, 0.02);
    --glass-blur: 44px;
    --glass-saturate: 190%;
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.55);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);
    --glass-glow: 0 0 0 0.5px rgba(255, 255, 255, 0.4);

    /* Text */
    --text-primary: #000000;
    --text-secondary: #6d6d80;
    --text-tertiary: #8e8e93;
    --text-white: #ffffff;

    /* Shadows — layered for depth */
    --shadow-light: 0 1px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-heavy: 0 12px 40px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-elevated: 0 24px 60px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.06);

    /* Borders */
    --border-radius: 14px;
    --border-radius-small: 10px;
    --border-radius-large: 22px;
    --border-radius-pill: 100px;
    --border-color: rgba(0, 0, 0, 0.06);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Timing */
    --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
    --duration-slow: 0.4s;

    /* Mesh gradient */
    --mesh-1: #f0f3fa;
    --mesh-2: #f5f0f8;
    --mesh-3: #f0f6f4;
    --mesh-4: #f6f2f0;
}

/* ── Dark theme ── */
@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #0a84ff;
        --color-primary-dark: #0066cc;
        --color-primary-light: rgba(10, 132, 255, 0.15);
        --color-secondary: #5e5ce6;
        --color-secondary-light: rgba(94, 92, 230, 0.15);
        --color-success: #32d74b;
        --color-success-light: rgba(50, 215, 75, 0.15);
        --color-warning: #ff9f0a;
        --color-warning-light: rgba(255, 159, 10, 0.15);
        --color-error: #ff453a;
        --color-error-light: rgba(255, 69, 58, 0.15);
        --color-link: #0a84ff;

        --bg-primary: #000000;
        --bg-secondary: #1c1c1e;
        --bg-tertiary: #2c2c2e;

        --bg-glass: rgba(38, 38, 40, 0.6);
        --bg-glass-thick: rgba(44, 44, 46, 0.78);
        --bg-glass-thin: rgba(38, 38, 40, 0.38);
        --bg-glass-dark: rgba(255, 255, 255, 0.04);
        --glass-border: rgba(255, 255, 255, 0.12);
        --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
        --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16);
        --glass-glow: 0 0 0 0.5px rgba(255, 255, 255, 0.08);

        --text-primary: #ffffff;
        --text-secondary: #98989d;
        --text-tertiary: #636366;

        --shadow-light: 0 1px 4px rgba(0, 0, 0, 0.2);
        --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.3);
        --shadow-heavy: 0 12px 40px rgba(0, 0, 0, 0.4);
        --shadow-elevated: 0 24px 60px rgba(0, 0, 0, 0.5);

        --border-color: rgba(255, 255, 255, 0.08);

        --mesh-1: #0a0a14;
        --mesh-2: #100a14;
        --mesh-3: #0a1410;
        --mesh-4: #14100a;
    }
}

/* ── Telegram dark theme ── */
body.tg-dark-theme {
    --color-primary: #0a84ff;
    --color-primary-dark: #0066cc;
    --color-primary-light: rgba(10, 132, 255, 0.15);
    --color-secondary: #5e5ce6;
    --color-secondary-light: rgba(94, 92, 230, 0.15);
    --color-success: #32d74b;
    --color-success-light: rgba(50, 215, 75, 0.15);
    --color-warning: #ff9f0a;
    --color-warning-light: rgba(255, 159, 10, 0.15);
    --color-error: #ff453a;
    --color-error-light: rgba(255, 69, 58, 0.15);
    --color-link: #0a84ff;

    --bg-primary: #17212b;
    --bg-secondary: #1d2733;
    --bg-tertiary: #2c3847;

    --bg-glass: rgba(29, 39, 51, 0.6);
    --bg-glass-thick: rgba(29, 39, 51, 0.78);
    --bg-glass-thin: rgba(29, 39, 51, 0.38);
    --bg-glass-dark: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    --glass-glow: 0 0 0 0.5px rgba(255, 255, 255, 0.06);

    --text-primary: #ffffff;
    --text-secondary: #98989d;
    --text-tertiary: #636366;

    --shadow-light: 0 1px 4px rgba(0, 0, 0, 0.2);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-heavy: 0 12px 40px rgba(0, 0, 0, 0.4);
    --shadow-elevated: 0 24px 60px rgba(0, 0, 0, 0.5);

    --border-color: rgba(255, 255, 255, 0.08);

    --mesh-1: #17212b;
    --mesh-2: #1a2435;
    --mesh-3: #17212b;
    --mesh-4: #1a2435;
}