/*
    Custom Control Panel styling for Amadeus Lyceum.
    Loaded via statamic.cp.custom_css_url → /cms/cp.css.

    Strategy: override Statamic's CSS variables where possible (the cleanest
    way to recolour the CP), and fall back to specific selectors for the bits
    that are still hard-coded blue in Statamic's Vue components.
*/

:root {
    /* Brand colour scale — Statamic uses these for buttons, focus rings,
       toggles and the sidebar's active indicator. */
    --c-primary-50:  #faf5fc;
    --c-primary-100: #f3e7f7;
    --c-primary-200: #e6cfee;
    --c-primary-300: #d2a8df;
    --c-primary-400: #b878c9;
    --c-primary-500: #9e54b3;
    --c-primary-600: #80398e;
    --c-primary-700: #6a2f76;
    --c-primary-800: #4d2256;
    --c-primary-900: #2e1433;
    --c-primary-950: #1c0c1f;

    /* Some Statamic builds expose colours under different variable names —
       set both so we cover v4 and v5 conventions. */
    --primary-50:  var(--c-primary-50);
    --primary-100: var(--c-primary-100);
    --primary-200: var(--c-primary-200);
    --primary-300: var(--c-primary-300);
    --primary-400: var(--c-primary-400);
    --primary-500: var(--c-primary-500);
    --primary-600: var(--c-primary-600);
    --primary-700: var(--c-primary-700);
    --primary-800: var(--c-primary-800);
    --primary-900: var(--c-primary-900);
    --primary-950: var(--c-primary-950);
}

/* Fallback: force-recolour the primary action buttons that are still
   hard-coded blue in Statamic's component CSS. */
.btn-primary,
button.btn-primary {
    background-color: #80398e !important;
    border-color: #80398e !important;
}

.btn-primary:hover,
button.btn-primary:hover {
    background-color: #6a2f76 !important;
    border-color: #6a2f76 !important;
}

/* Focus rings on form fields */
.input-text:focus,
.input-textarea:focus,
.input-select:focus {
    border-color: #80398e !important;
    box-shadow: 0 0 0 1px #80398e !important;
}

/* Active sidebar nav item indicator */
.nav-main-item.active,
.nav-main-item.exact-active {
    border-left-color: #80398e !important;
}

/* Toggle switches when "on" */
.toggle-fieldtype.on,
.publish-toggle .toggle.on {
    background-color: #80398e !important;
}

/* Logo text on the login screen — make it pop in brand colour */
.login-area h1,
.login-area .logo-text {
    color: #80398e;
}