/* ==========================================================================
   🎨 MATERIAL 3 EXPRESSIVE DESIGN TOKENS
   Strict adherence to MATERIAL_3_EXPRESSIVE_GUIDELINES_WEBSITES.md
   Brand Base: Deep Sapphire #0a307b (Light) / Luminous Sapphire #aec6ff (Dark)
   ========================================================================== */

:root,
[data-theme="light"],
[data-bs-theme="light"] {
    /* 🌟 Бренд-акцент: Deep Sapphire */
    --md-sys-color-primary: #0a307b;
    --md-sys-color-primary-hover: #07235d;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #d9e2ff;
    --md-sys-color-on-primary-container: #001944;

    /* 💖 Романтичний та акцентний градієнт */
    --md-sys-color-romantic: #e11d48;
    --md-sys-color-romantic-container: #ffe4e6;
    --md-sys-color-on-romantic-container: #881337;
    --md-sys-color-romantic-gradient: linear-gradient(135deg, #f43f5e 0%, #ec4899 50%, #8b5cf6 100%);

    /* 🎨 Вторинні та третинні акценти */
    --md-sys-color-secondary: #006399;
    --md-sys-color-secondary-container: #cde5ff;
    --md-sys-color-on-secondary-container: #001d32;

    --md-sys-color-tertiary: #6750a4;
    --md-sys-color-tertiary-container: #eaddff;
    --md-sys-color-on-tertiary-container: #21005d;

    /* 🏢 Поверхні та шари (Tonal Surface Hierarchy) */
    --md-sys-color-background: #f8f9fc;
    --md-sys-color-surface: #ffffff;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f2f4f9;
    --md-sys-color-surface-container: #e9edf5;
    --md-sys-color-surface-container-high: #dfe4ee;
    --md-sys-color-surface-container-highest: #d3d9e5;

    /* ✍️ Текст та контури */
    --md-sys-color-on-surface: #191c22;
    --md-sys-color-on-surface-variant: #434752;
    --md-sys-color-outline: #737785;
    --md-sys-color-outline-variant: #c3c6d4;

    /* 🚦 Статуси */
    --md-sys-color-success: #137333;
    --md-sys-color-success-container: #dcfce7;
    --md-sys-color-on-success-container: #052e16;

    --md-sys-color-warning: #b06000;
    --md-sys-color-warning-container: #ffdf9e;
    --md-sys-color-on-warning-container: #2b1700;

    --md-sys-color-error: #ba1a1a;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;

    /* 🌫️ Тіні (Ambient Color Shadows) */
    --md-sys-elevation-1: 0 1px 3px 1px rgba(10, 48, 123, 0.06), 0 1px 2px 0 rgba(10, 48, 123, 0.08);
    --md-sys-elevation-2: 0 4px 14px 2px rgba(10, 48, 123, 0.09), 0 2px 4px 0 rgba(10, 48, 123, 0.1);
    --md-sys-elevation-3: 0 10px 28px 4px rgba(10, 48, 123, 0.13), 0 4px 8px 0 rgba(10, 48, 123, 0.15);
    --md-sys-elevation-4: 0 16px 40px 6px rgba(10, 48, 123, 0.18);

    /* 📐 Радіуси та таймінги */
    --md-shape-corner-xs: 6px;
    --md-shape-corner-sm: 10px;
    --md-shape-corner-md: 16px;
    --md-shape-corner-lg: 24px;
    --md-shape-corner-xl: 32px;
    --md-shape-corner-full: 9999px;

    --md-easing-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1);
    --md-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
    --md-duration: 0.25s;

    /* 🌈 Тематичні градієнти фонів */
    --jemmy-bg-mesh: radial-gradient(circle at 10% 20%, rgba(217, 226, 255, 0.7) 0%, transparent 40%),
                     radial-gradient(circle at 90% 80%, rgba(255, 228, 230, 0.6) 0%, transparent 45%),
                     radial-gradient(circle at 50% 50%, rgba(234, 221, 255, 0.4) 0%, transparent 50%),
                     #f8f9fc;
}

[data-theme="dark"],
[data-bs-theme="dark"],
body.dark {
    /* 🌟 Бренд-акцент: Luminous Sapphire */
    --md-sys-color-primary: #aec6ff;
    --md-sys-color-primary-hover: #c8d8ff;
    --md-sys-color-on-primary: #002e6c;
    --md-sys-color-primary-container: #0a307b;
    --md-sys-color-on-primary-container: #d9e2ff;

    /* 💖 Романтичний неоновий акцент */
    --md-sys-color-romantic: #fb7185;
    --md-sys-color-romantic-container: #4c0519;
    --md-sys-color-on-romantic-container: #fecdd3;
    --md-sys-color-romantic-gradient: linear-gradient(135deg, #fb7185 0%, #f43f5e 50%, #c084fc 100%);

    /* 🎨 Вторинні акценти */
    --md-sys-color-secondary: #94ccff;
    --md-sys-color-secondary-container: #004b75;
    --md-sys-color-on-secondary-container: #cde5ff;

    --md-sys-color-tertiary: #d0bcff;
    --md-sys-color-tertiary-container: #4f378b;
    --md-sys-color-on-tertiary-container: #eaddff;

    /* 🏢 Поверхні темної теми (Глибокий Graphite / Obsidian) */
    --md-sys-color-background: #0f1217;
    --md-sys-color-surface: #161a22;
    --md-sys-color-surface-container-lowest: #0b0d11;
    --md-sys-color-surface-container-low: #1c212b;
    --md-sys-color-surface-container: #232936;
    --md-sys-color-surface-container-high: #2b3242;
    --md-sys-color-surface-container-highest: #373f52;

    /* ✍️ Текст та контури */
    --md-sys-color-on-surface: #e2e2ea;
    --md-sys-color-on-surface-variant: #c3c6d4;
    --md-sys-color-outline: #8d919f;
    --md-sys-color-outline-variant: #3a3f4d;

    /* 🚦 Статуси */
    --md-sys-color-success: #81c995;
    --md-sys-color-success-container: #0f5132;
    --md-sys-color-on-success-container: #a3f7ba;

    --md-sys-color-warning: #ffb865;
    --md-sys-color-warning-container: #673d00;
    --md-sys-color-on-warning-container: #ffddb3;

    --md-sys-color-error: #ffb4ab;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;

    /* 🌫️ Тіні темної теми */
    --md-sys-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.45);
    --md-sys-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.55);
    --md-sys-elevation-3: 0 10px 30px rgba(0, 0, 0, 0.65);
    --md-sys-elevation-4: 0 18px 48px rgba(0, 0, 0, 0.8);

    /* 🌈 Темний меш-градієнт */
    --jemmy-bg-mesh: radial-gradient(circle at 10% 20%, rgba(10, 48, 123, 0.4) 0%, transparent 45%),
                     radial-gradient(circle at 90% 80%, rgba(76, 5, 25, 0.45) 0%, transparent 50%),
                     radial-gradient(circle at 50% 50%, rgba(79, 55, 139, 0.3) 0%, transparent 50%),
                     #0f1217;
}