/*
 * Eko Atlantic brand colours.
 *
 * The Dreams Core theme ships a green palette. This file re-points the custom properties that palette is built
 * from, so every existing class (badge-solid-primary, icon-chip is-accent, the sidebar, the charts) picks up the
 * logo's blue without a single new utility class and without editing the prebuilt bundle.
 *
 * The theme defines its variables inside `@layer theme`. Anything unlayered beats a layer whatever the source
 * order, so this file wins by being unlayered - it does not depend on being loaded second.
 *
 * Taken from the logo: the bright cyan-blue of the wordmark and the top of the oval (#29abe2, hue 198), and the
 * deeper blue in the oval's gradient (#1b75bb, hue 206). Primary sits between them at hue 202; accent is the
 * lighter, cyan-leaning half at hue 190, which is the same two-tone relationship the logo itself uses.
 *
 * Success, warning and danger are deliberately left alone. They carry meaning rather than brand - a green tick
 * and a red warning have to stay unmistakable, and tinting them towards the brand would cost more than it gained.
 * Info is shifted to indigo so it stays distinct now that the brand itself is blue.
 */

:root,
:host,
[data-theme="light"] {
    /* ---- Primary: the brand blue ---- */
    --color-primary-50: #f2f8fc;
    --color-primary-100: #e1eff6;
    --color-primary-200: #bedef1;
    --color-primary-300: #91caeb;
    --color-primary-400: #61b5e5;
    --color-primary-500: #259ee4;
    --color-primary-600: #1883c1;
    --color-primary-700: #166a9a;
    --color-primary-800: #16567c;
    --color-primary-900: #154865;
    --color-primary-950: #0e2d3f;
    --color-primary: var(--color-primary-600);
    --color-primary-hover: #0f6fa8;
    --color-primary-transparent: #eaf3f9;
    --shadow-glow-primary: 0 8px 24px -6px #1883c159;
    --background-image-primary-gradient: linear-gradient(90deg, #166a9a 0%, #1f9bdd 100%);

    /* ---- Accent: the lighter cyan from the logo's gradient ---- */
    --color-accent-50: #f0fafd;
    --color-accent-100: #dbf2f8;
    --color-accent-200: #b6e6f2;
    --color-accent-300: #86d6e9;
    --color-accent-400: #52c4de;
    --color-accent-500: #21aecd;
    --color-accent-600: #1690ac;
    --color-accent-700: #16748a;
    --color-accent-800: #175f71;
    --color-accent-900: #164f5e;
    --color-accent: var(--color-accent-500);
    --shadow-glow-accent: 0 8px 24px -6px #21aecd4d;

    /* ---- Info: moved to indigo, so it no longer reads as the brand ---- */
    --color-info-50: #eef2fb;
    --color-info-100: #dbe3f7;
    --color-info-200: #bac8ef;
    --color-info-300: #94a9e3;
    --color-info-400: #738ed6;
    --color-info-500: #5674c6;
    --color-info-600: #435ca5;
    --color-info-700: #374a84;
    --color-info-800: #2e3d6b;
    --color-info-900: #283459;
    --color-info: var(--color-info-600);
    --color-info-hover: #3a55b4;
    --color-info-transparent: #eef1fb;
    --shadow-glow-info: 0 8px 24px -6px #5674c659;
    --background-image-info-gradient: linear-gradient(90deg, #9fb0e8 0%, #7a90dc 100%);

    /* ---- Neutrals: the same greys, with the green cast swapped for the brand's cool one ---- */
    --color-neutral-50: #f7f8f9;
    --color-neutral-100: #eff1f3;
    --color-neutral-150: #e4e7ea;
    --color-neutral-200: #d5dbdf;
    --color-neutral-300: #bbc4cb;
    --color-neutral-400: #919ea9;
    --color-neutral-500: #6c7b87;
    --color-neutral-600: #546069;
    --color-neutral-700: #404950;
    --color-neutral-800: #2b3136;
    --color-neutral-900: #1b2024;

    /* ---- The sidebar, which is the largest block of colour on every page ---- */
    --sidebar-bg: #0e1e2a;
    --sidebar-bg-active: #16324a;
}

[data-theme="dark"] {
    /* The dark theme keeps the primary ramp above and only re-floors its lightest two stops. */
    --color-primary-50: #132430;
    --color-primary-100: #17303f;
    --color-primary-transparent: #1c2d38;

    --color-accent-50: #0f2730;
    --color-accent-100: #133440;

    --color-info-50: #161d33;
    --color-info-100: #1c2645;
    --color-info-200: #212c51;
    --color-info-300: #27345e;
    --color-info-400: #2c3b6b;
    --color-info-500: #324278;
    --color-info-600: #384a86;
    --color-info-700: #3f5295;
    --color-info-800: #465ba4;
    --color-info-900: #5069b8;
    --color-info-hover: #7e93e0;
    --color-info-transparent: #131a2c;

    --sidebar-bg: #080f16;
    --sidebar-bg-active: #12222f;
}

/* ---------------------------------------------------------------------------
   Sidebar dropdowns

   The theme collapses a submenu with `max-height: 0` but leaves its margin
   (.3rem top, .4rem bottom) in place, so a *closed* dropdown still pushed the
   item below it about 0.7rem further down than the gap between two plain
   links. With two dropdowns in Access Control that read as My Guest Events
   drifting away from the rest of the group.

   Collapsing the margin while closed is enough; the open state keeps the
   theme's own spacing.
--------------------------------------------------------------------------- */
#sidebarMenu li.has-submenu:not(.is-open) > .sidebar-submenu {
    margin-block: 0;
}

/* A submenu toggle is a <button>, so it needs the alignment a .sidebar-link
   <a> gets for free from the theme's own anchor rules. */
#sidebarMenu .sidebar-link[data-submenu-toggle] {
    display: flex;
    align-items: center;
    text-align: start;
}