/* Per-brand overrides, selected by <html data-brand="<key>"> (see config/packages/branding.yaml and
   docs/branding.md).
   The default brand has no block: its values are the :root defaults in theme.css / auth.css.
   Loaded after theme.css and auth.css so these win at equal specificity. A brand only lists what
   differs. Fomantic UI keeps its own colours under every brand. */

/* idm - interactive digital media, in the style of https://www.i-digital-m.com: navy #2d3142 surfaces, orange #e8720c
   accent, orange wordmark on navy. Values read from the website's CSS (--color-navy,
   --color-primary, -light, -dark). Buttons use the dark orange (#c45f08) so white text stays
   readable. Test: http://idm.localhost:8000 */
[data-brand="idm"] {
    --primary-50: 255 247 237;
    --primary-100: 255 237 213;
    --primary-200: 254 215 170;
    --primary-300: 250 186 118;
    --primary-400: 245 158 63;
    --primary-500: 232 114 12;
    --primary-600: 196 95 8;
    --primary-700: 160 78 7;
    --primary-800: 125 61 8;
    --primary-900: 92 46 9;
    --primary-950: 51 26 4;

    --secondary-50: 247 248 250;
    --secondary-100: 240 241 245;
    --secondary-200: 226 228 236;
    --secondary-300: 197 200 214;
    --secondary-400: 154 158 179;
    --secondary-500: 107 112 136;
    --secondary-600: 77 82 104;
    --secondary-700: 61 65 86;
    --secondary-800: 45 49 66;
    --secondary-900: 26 29 46;
    --secondary-950: 16 18 29;

    --brand-mark-bg: #2d3142;

    /* theme.css buttons */
    --btn-primary-bg: #c45f08;
    --btn-primary-hover: #a04d07;
    --btn-outline-primary: #c45f08;

    /* auth.css (login, self-service, 2FA, credential pickup) */
    --color-primary: #c45f08;
    --color-primary-hover: #a04d07;
}

[data-brand="idm"].dark {
    --btn-outline-primary: #f59e3f;

    --app-bg: #1a1d2e;
    --card-bg: #2d3142;
    --hover-bg: #3d4156;
    --border-color: #3d4156;
    --border-hover: #565b72;
    --btn-secondary-bg: #3d4156;
    --btn-secondary-hover: #565b72;
}

/* Sidebar header: navy band with an orange rule in both themes, like the website's header */
[data-brand="idm"] #sidebarLogoWrapper {
    background-color: #2d3142;
    border-bottom: 3px solid #e8720c;
}

/* Brands with a wordmark in the sidebar header (navbar-left.html.twig): the wordmark while the
   sidebar is expanded, the square mark once the name span is hidden (collapsed). */
#sidebarLogo.has-wordmark span:not(.hidden) + .brand-mark {
    display: none;
}