/* ═══════════════════════════════════════════════════════════════════════════════
   COLOUR TOKENS — HTP Tool color palette and roles.

   Every colour in this project is declared here. The CSS is structured in two layers:

   1) PALETTE — raw values only, each colour declared once, never reused as-is.
   2) ROLES — semantic names by where they appear; roles reference the palette or
              other roles, forming a dependency graph so changes to one colour
              ripple through all its roles.

   Style rules in styles.css and HTML templates use only var(--role-name).

   Adding a new colour:
   - First: does it exist? Search for its hex value.
   - If new: add it to the palette (exact section by hue and tone).
   - Then: add a role that names its use (e.g. --btn-ok-bg for "button OK background").
   - Finally: use var(--btn-ok-bg) everywhere, never the literal hex.

   Merging colours:
   - If two roles use the same colour, add a third that is the role (e.g. if both
     --badge-ok-bg and --status-ok-bg use the same green, add
     --status-ok-color: var(--palette-green-500); then reference it).
   - This keeps changes local: fix the palette, and all roles adapt.
═══════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ══════════════════════════════════════════════════════════════
       COLOURS — every colour of this stylesheet is declared here.
       1) Palette: the raw values, each one only once.
       2) Roles: named by where they are used; they always point to the
          palette (or to another role), so a shared colour changes in one place.
       Rules below only use var(--role).
       ══════════════════════════════════════════════════════════════ */

    /* ── 1. Palette ── */
    /* Brand identity (FHa corporate guide) */
    --palette-brand-blue: #0077c8;        /* corporate blue */
    --palette-brand-blue-dark: #005996;
    --palette-brand-blue-mid: #4c8ec9;
    --palette-brand-green: #04d9a0;
    /* Tones of the brand blue (tint = mixed with white, shade = with black; allowed by the guide) */
    --palette-blue-tint-40: #99c9e9;      /* navbar background */
    --palette-blue-tint-20: #cce4f4;
    --palette-blue-tint-10: #e6f1fa;
    --palette-blue-shade: #003153;        /* footer, ink */
    /* Secondary greys (guide) */
    --palette-grey-900: #2b3136;
    --palette-grey-700: #5b6770;
    --palette-grey-500: #b0b8c1;
    --palette-grey-100: #d9e1e8;
    --palette-grey-50: #f7f9fb;
    --palette-white: #ffffff;
    --palette-black: #000000;

    /* Category hues (not in the guide: modules need distinct colours) */
    --palette-aqua: #2b9ba0;
    --palette-earth: #8a6a3d;          /* Land & Space */
    --palette-indigo: #5a5fc4;         /* Social Impact */
    --palette-brand-green-dark: #028260; /* Learning: brand green darkened for white-text contrast (4.8:1) */
    --palette-green: #4ea72e;
    --palette-forest: #196b24;
    --palette-green-dark: #245c14;
    --palette-green-100: #eef9ea;
    --palette-green-25: #f4fbf5;
    --palette-green-20: #f5fbf2;
    --palette-purple: #a02b93;
    --palette-orange: #e97132;
    --palette-pink: #b54786;
    --palette-pink-light: #f4c2d7;

    /* Status: reds / ambers */
    --palette-red: #d32f2f;
    --palette-red-dark: #c00000;
    --palette-red-darker: #8a0000;
    --palette-red-light-bg: #fff0f0;
    --palette-red-pale-bg: #fff5f5;
    --palette-amber: #ffc107;
    --palette-brown: #6f5200;
    --palette-brown-dark: #3b2f00;
    --palette-amber-light-bg: #fff8df;
    --palette-amber-pale-bg: #fffaf0;

    /* ── 2. Roles ── */
    /* Modules and sections */
    --color-h2: var(--palette-brand-blue);
    --color-h2pp: var(--palette-brand-blue-mid);
    --color-power: var(--palette-green);
    --color-storage: var(--palette-purple);
    --color-transport: var(--palette-forest);
    --color-applications: var(--palette-brand-blue-dark);     /* was teal-blue (consolidated) */
    --color-uses: var(--palette-orange);
    --color-settings: var(--palette-grey-700);
    --color-heat: var(--palette-red-dark);
    --color-co2: var(--color-transport);
    --color-financial: var(--palette-amber);
    --color-admin: var(--palette-pink);
    --color-summary: var(--color-h2);
    --color-land: var(--palette-earth);
    --color-social: var(--palette-indigo);
    --color-learning: var(--palette-brand-green-dark);
    --color-standards: var(--palette-aqua);
    --color-safety: var(--palette-amber);
    --color-safety-red: var(--palette-red);
    --color-safety-amber: var(--palette-amber);
    --color-button: var(--color-h2pp);
    --color-button2: var(--color-h2pp);   /* overridden per page */

    /* General */
    --color-ink: var(--palette-blue-shade);                 /* dark blue text on light blues */
    --color-text: var(--palette-grey-900);
    --color-text-strong: var(--palette-black);
    --color-text-muted: var(--palette-grey-700);     /* was grey-600 (removed) */
    --color-text-on-color: var(--palette-white);     /* text on coloured buttons */
    --color-surface: var(--palette-white);           /* cards, panels, modals */
    --color-tint-base: var(--palette-white);         /* base of color-mix() tints */
    --color-shade-base: var(--palette-black);        /* base of color-mix() shades */
    --color-dark-grey: var(--palette-grey-700);
    --color-light-grey: var(--palette-grey-50);
    --color-disabled: var(--palette-grey-500);       /* was grey-350 (removed) */
    --color-border-light: var(--palette-grey-100);
    --color-bg-h2: var(--palette-blue-tint-10);        /* was blue-very-pale (consolidated) */
    --color-border-h2: color-mix(in srgb, var(--palette-brand-blue) 22%, transparent);
    --color-divider-subtle: color-mix(in srgb, var(--palette-black) 8%, transparent);
    --color-border-strong: var(--palette-grey-500);
    --color-underground: var(--palette-brown);
    --color-success: var(--palette-forest);
    --shadow-color: var(--palette-brand-blue-dark);
    --shadow-15: color-mix(in srgb, var(--shadow-color) 15%, transparent);
    --shadow-18: color-mix(in srgb, var(--shadow-color) 18%, transparent);
    --shadow-20: color-mix(in srgb, var(--shadow-color) 20%, transparent);
    --shadow-22: color-mix(in srgb, var(--shadow-color) 22%, transparent);
    --shadow-25: color-mix(in srgb, var(--shadow-color) 25%, transparent);

    /* Legacy buttons, tabs and boxes */
    --btn-custom-hover-text: var(--color-text-on-color);
    --card-header-bg: var(--color-surface);
    --tab-border: var(--palette-grey-100);         /* was grey-200/250 (consolidated) */
    --tab-bg: var(--color-light-grey);
    --tab-hover-bg: var(--palette-grey-100);
    --tab-active-bg: var(--palette-grey-100);      /* was grey-250 (consolidated) */
    --box-res-border: var(--palette-grey-500);
    --result-section-bg: var(--color-surface);
    --result-section-border: var(--palette-brand-green);
    --btn-customer-bg: var(--color-surface);
    --btn-customer-hover-text: var(--color-text-on-color);
    --rounded-label-text: var(--color-text-on-color);
    --btn-user-bg: var(--color-surface);
    --btn-user-text: var(--navbar-bg);
    --controls-btn-text: var(--color-text-on-color);
    --fha-link-border: var(--palette-grey-100);   /* was grey-150/200 (consolidated) */
    --fha-link-text: var(--palette-grey-700);
    --fha-link-hover-border: var(--palette-grey-500); /* was grey-400 (consolidated) */
    --fha-link-hover-text: var(--palette-grey-900);
    --modal-backdrop: color-mix(in srgb, var(--palette-black) 50%, transparent);
    --modal-bg: var(--color-surface);

    /* H2 production: plants table, results overlay, simulate buttons */
    --plants-table-head-text: var(--color-text-on-color);
    --h2prod-overlay-bg: color-mix(in srgb, var(--palette-white) 35%, transparent);
    --h2prod-overlay-card-bg: color-mix(in srgb, var(--palette-white) 92%, transparent);
    --h2prod-overlay-card-shadow: color-mix(in srgb, var(--palette-black) 8%, transparent);
    --h2prod-overlay-text: var(--palette-brand-blue-dark);       /* was slate-medium (consolidated) */
    --h2prod-chip-bg: var(--palette-blue-tint-20);   /* was cyan-light-bg (consolidated) */
    --h2prod-chip-text: var(--palette-brand-blue-dark);         /* was slate-medium (consolidated) */
    --sim-btn-active-text: var(--color-text-on-color);
    --sim-btn-disabled-bg: var(--palette-grey-100);
    --sim-btn-disabled-text: var(--palette-grey-700);
    --sim-btn-disabled-strong-bg: var(--palette-grey-500);
    --sim-btn-disabled-strong-text: var(--color-text-on-color);
    --simulate-btn-disabled-bg: var(--palette-grey-700);
    --simulate-btn-disabled-text: var(--color-text-on-color);
    --cancel-btn-disabled-bg: var(--palette-grey-500);
    --cancel-btn-disabled-text: var(--color-text-on-color);

    /* Password field */
    --password-toggle-hover-bg: var(--palette-grey-100);
    --password-toggle-active-bg: var(--palette-blue-tint-20);
    --password-toggle-active-ring: color-mix(in srgb, var(--palette-brand-blue) 25%, transparent);
    --password-toggle-focus-bg: var(--palette-blue-tint-10);    /* was blue-very-pale (consolidated) */

    /* Simulation progress modal */
    --modal-sim-subtitle: var(--palette-grey-700);
    --modal-sim-details-text: var(--palette-grey-900);
    --modal-sim-details-bg: var(--palette-grey-50);
    --modal-sim-progress-bg: var(--palette-grey-100);

    /* Selected-scenario bar */
    --scenario-bar-text: var(--palette-brand-blue-dark);     /* was slate-dark (consolidated) */
    --scenario-name-text: var(--color-ink);
    --scenario-name-bg: var(--palette-blue-tint-10);
    --scenario-desc-text: var(--palette-brand-blue-dark);    /* was slate-medium (consolidated) */

    /* H2 balance diagram */
    --balance-node-border: var(--palette-blue-tint-20);
    --balance-node-bg: var(--color-surface);
    --balance-production-border: color-mix(in srgb, var(--color-h2pp) 45%, transparent);
    --balance-production-bg: var(--palette-blue-tint-20);  /* was cyan-light-bg (consolidated) */
    --balance-transport-border: color-mix(in srgb, var(--color-transport) 45%, transparent);
    --balance-transport-bg: var(--palette-green-25);
    --balance-consumption-border: color-mix(in srgb, var(--color-applications) 45%, transparent);
    --balance-consumption-bg: var(--palette-blue-tint-10);    /* was blue-very-pale (consolidated) */
    --balance-bad-border: var(--color-heat);
    --balance-bad-bg: var(--palette-red-pale-bg);
    --balance-bad-strong-bg: var(--palette-red-light-bg);
    --balance-bad-text: var(--palette-red-darker);
    --balance-surplus-border: var(--color-financial);
    --balance-surplus-bg: var(--palette-amber-pale-bg);
    --balance-surplus-strong-bg: var(--palette-amber-light-bg);
    --balance-surplus-text: var(--palette-brown);
    --balance-ok-bg: var(--palette-green-100);
    --balance-ok-text: var(--palette-green-dark);
    --balance-balanced-bg: var(--palette-green-20);
    --balance-title: var(--palette-blue-shade);          /* was navy-dark (consolidated) */
    --balance-caption: var(--palette-brand-blue-dark);      /* was slate-medium (consolidated) */
    --balance-pill-bg: color-mix(in srgb, var(--palette-white) 78%, transparent);
    --balance-pill-border: color-mix(in srgb, var(--color-transport) 20%, transparent);

    /* Summary map popups */
    --map-popup-text: var(--palette-blue-shade);        /* was navy-dark (consolidated) */
    --map-title-border: var(--palette-blue-tint-20);
    --map-row-label: var(--palette-brand-blue-dark);        /* was slate-medium (consolidated) */
    --map-row-value: var(--palette-blue-shade);         /* was navy-dark (consolidated) */

    /* Navbar */
    --navbar-bg: var(--palette-blue-tint-40);
    --navbar-gradient-top: color-mix(in srgb, var(--navbar-bg), var(--palette-white) 38%);
    --navbar-ink: var(--color-ink);
    --navbar-shadow: var(--shadow-18);
    --navbar-toggler-border: color-mix(in srgb, var(--color-ink) 30%, transparent);
    --navbar-divider: color-mix(in srgb, var(--color-ink) 18%, transparent);
    --navbar-mobile-divider: color-mix(in srgb, var(--color-ink) 15%, transparent);
    --navbar-item-hover-bg: color-mix(in srgb, var(--palette-white) 50%, transparent);
    --navbar-item-active-bg: color-mix(in srgb, var(--palette-white) 92%, transparent);
    --navbar-item-active-shadow: var(--shadow-18);
    --navbar-label-shade: var(--color-shade-base);
    --navbar-safety-color: color-mix(in srgb, var(--color-safety) 60%, var(--palette-black));
    --navbar-chip-bg: var(--color-surface);
    --navbar-chip-shadow: var(--shadow-25);
    --navbar-dropdown-shadow: var(--shadow-22);
    --navbar-admin-active-bg: var(--palette-pink-light);
    --navbar-user-bg: color-mix(in srgb, var(--palette-white) 60%, transparent);
    --navbar-user-hover-bg: var(--color-surface);
    --navbar-user-border: color-mix(in srgb, var(--color-ink) 15%, transparent);
    --navbar-user-text: var(--color-ink);
    --navbar-user-shadow: var(--shadow-15);
    --navbar-user-active-shadow: var(--shadow-18);
    --navbar-expiry-bg: var(--palette-amber);
    --navbar-expiry-text: var(--palette-brown-dark);
    --navbar-logout-shadow: color-mix(in srgb, var(--palette-black) 20%, transparent);
    --navbar-request-shadow: var(--shadow-20);
    --navbar-login-text: var(--color-ink);
    --navbar-login-hover-bg: color-mix(in srgb, var(--palette-white) 50%, transparent);

    /* Removed duplicate roles that served no purpose:
       --color-button2 (was same as --color-button)
       These simplifications remove single-use color tokens and reduce cognitive load. */

    /* Sidebar (module library) */
    --sidebar-tab-text: var(--color-text-on-color);
    --sidebar-tab-shadow: var(--shadow-25);
    --sidebar-overlay: color-mix(in srgb, var(--palette-black) 35%, transparent);
    --sidebar-bg: var(--color-surface);
    --sidebar-shadow: var(--shadow-18);
    --sidebar-header-shadow: var(--shadow-18);
    --sidebar-ink: var(--color-ink);
    --sidebar-close-hover-bg: color-mix(in srgb, var(--palette-white) 55%, transparent);
    --sidebar-select-focus-ring: color-mix(in srgb, var(--color-h2) 20%, transparent);
    --sidebar-category-bg: var(--color-surface);
    --sidebar-chip-bg: var(--color-surface);
    --sidebar-chip-shadow: var(--shadow-25);
    --sidebar-item-hover-text: var(--color-text-strong);

    /* Footer and cookie notice */
    --footer-bg: var(--color-ink);
    --footer-text: var(--palette-blue-tint-10);
    --footer-accent: var(--navbar-bg);
    --footer-link: var(--navbar-bg);
    --footer-link-hover: var(--palette-white);
    --footer-divider: color-mix(in srgb, var(--navbar-bg) 25%, transparent);
    --footer-bottom-text: var(--palette-grey-500);
    --cookie-bg: var(--color-surface);
    --cookie-shadow: var(--shadow-20);
    --cookie-btn-text: var(--color-text-on-color);
    --cookie-btn-hover-bg: var(--palette-brand-blue-dark);

    /* Non-colour layout tokens */
    --margin-title: 40px;
    --margin-col: 40px;
  }