/* Flow Theme - AlphaNodes GmbH - https://alphanodes.com - Redmine Hosting
 * Optimized for AlphaNodes Redmine plugins. */

/* Flow Theme - Light Color Profile
 *
 * Alternative to flow-variables.css (Indigo). The only profile with a
 * LIGHT top-menu bar - a soft gray->periwinkle->lavender gradient with dark
 * text instead of dark chrome - paired with a blue (oc-blue) accent for an
 * airy, clean look.
 * Import this AFTER flow-variables.css to override only the color tokens:
 *
 *   @import url("/assets/themes/flow/flow-variables-4ed44aec.css");
 *   @import url("/assets/themes/flow/flow-variables-light-4829f8dc.css");
 *
 * All structural variables (typography, layout, shadows) remain from
 * flow-variables.css. Only color-bearing tokens are overridden here. */

:root {
  /* -- Accent: Blue (oc-blue) - coheres with the lavender chrome -- */

  --a-color-default: var(--oc-blue-7);
  --a-colortone2: var(--oc-blue-9);
  --a-colortone7: var(--oc-blue-6);

  /* -- Surfaces -------------------------------------------------- */

  --a-color-surface-accent: var(--oc-blue-0);

  /* -- Links: blue ---------------------------------------------- */

  --a-color-link: var(--oc-blue-7);

  /* -- Top menu: LIGHT chrome - light bar with dark text. The only
   *    profile that inverts the menu (others use a dark bar). A soft
   *    gray->periwinkle->lavender gradient gives the otherwise flat light
   *    bar some life (a deliberate exception to the no-gradient rule,
   *    kept subtle so the header still reads modern and clear). ----- */

  --a-top-menu-bg: linear-gradient(to right, var(--oc-gray-1), var(--oc-indigo-2), var(--oc-violet-1));
  --a-top-menu-color: var(--oc-gray-8);
  --a-top-menu-children-hover-bg: var(--oc-yellow-1);

  /* Dropdown top border in lavender to match the header gradient. */
  --a-top-menu-children-border: var(--oc-indigo-2);

  /* Active app-menu tab underline picks up the lavender accent; the rest
   * of the menu stays standard. */
  --a-main-menu-active: var(--oc-indigo-2);

  /* -- Login background: subtle, weighted toward the bottom (top stays
   *    light gray, lavender/periwinkle pools at the bottom) so the mesh
   *    reads more top-to-bottom and matches the header. ------------ */

  --a-login-bg: var(--oc-gray-0);
  --a-login-bg-g1: var(--oc-gray-1);
  --a-login-bg-g2: var(--oc-gray-1);
  --a-login-bg-g3: var(--oc-violet-1);
  --a-login-bg-g4: var(--oc-indigo-1);
}

:root.dark,
:root:has(body.dark) {
  /* Dark mode: a light top bar makes no sense, so fall back to dark
   * chrome (the base dark bar + light text are inherited) and keep the
   * blue accent - effectively a blue dark theme. */

  /* -- Accent ---------------------------------------------------- */

  --a-color-default: var(--oc-blue-4);
  --a-colortone2: var(--oc-blue-8);
  --a-colortone7: var(--oc-blue-5);

  /* -- Surfaces -------------------------------------------------- */

  --a-color-surface-accent: var(--oc-blue-9);

  /* -- Top menu -------------------------------------------------- */

  --a-top-menu-bg: var(--oc-gray-9);
}

/* Mobile: the light gradient header can't render in the background-color
 * contexts the responsive layout uses, and dark-on-light text/icons there
 * become unreadable. On small screens fall back to a flat blue chrome with
 * white text - like the other profiles' dark bars (blue = the accent /
 * login-button color). The login-mask mesh (--a-login-*) is separate and
 * stays a gradient. */
@media screen and (max-width: 899px) {
  :root {
    /* oc-blue-9 rather than oc-blue-7: this colour also backs the flyout
     * menu, where white labels only reached 4.2:1 against the lighter
     * blue. At blue-9 they sit at 6.1:1, matching indigo and azur. */
    --a-top-menu-bg: var(--oc-blue-9);
    --a-top-menu-color: var(--oc-white);
  }
}

/* TODO (Redmine 7.0): Mirror changes here when re-enabling OS dark mode.
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --a-color-default: var(--oc-blue-4);
    --a-colortone2: var(--oc-blue-8);
    --a-colortone7: var(--oc-blue-5);
    --a-color-surface-accent: var(--oc-blue-9);
    --a-top-menu-bg: var(--oc-gray-9);
  }
} */