/* ==========================================================================
   Variables - Single source of truth for design tokens
   ========================================================================== */

:root {
    /* === Brand Colors === */
    --primary-color: #1c2d4d;
    --secondary-color: #CCE2FC;
    --gold-color: #A79479;

    /* RGB channel companions — use with rgba() e.g. rgba(var(--primary-color-rgb), 0.2) */
    --primary-color-rgb: 28, 45, 77;
    --gold-color-rgb: 167, 148, 121;
    --medium-gray-rgb: 116, 116, 116;

    /* Brand Color Mixes */
    --secondary-color-light: color-mix(in srgb, var(--secondary-color) 70%, white 30%);
    --secondary-color-dark: color-mix(in srgb, var(--secondary-color) 85%, black 15%);

    /* === Legacy/Alias (from global.css, charge_list, officer_list) === */
    --color-black: #000000;
    --color-grey: #E3E2E2;
    --color-dark-grey: #253146;
    --color-transparent: transparent;
    --unnamed-color-253146: #253146;
    --unnamed-character-spacing-0: 0px;
    --color-text-secondary: var(--medium-gray);
    --color-hover: var(--table-row-hover);

    /* === Status/Badge Colors === */
    --badge-success-bg: #b4ecbc;
    --badge-success-text: #1a5e1e;
    --badge-danger-bg: #ffcccc;
    --badge-danger-text: #b30000;
    --badge-warning-bg: #ffa500;
    --badge-warning-text: #ffd076;
    /* Energy / environment badge colours — used in asset_detail.css */
    --badge-energy-bg: #e0f7e9;
    --badge-energy-text: #00a651;
    --badge-env-bg: #e3e9f7;

    /* === Neutral Colors === */
    --white: #ffffff;
    --black: #000000;
    --light-gray: #f0f0f0;
    --neutral:  #d6d6d6;
    --medium-gray: #747474;
    --background-gray: #f9f9f9;
    --background-color: #f9f9f9;

    /* Pill Button Colors */
    --pill-grey-dark: #444444;
    --pill-grey-light: #e6dddd;

    /* === Utility Colors === */
    --hover-light-gray: #e0e0e0;
    --text-color: rgba(33, 37, 41, 0.75);
    --border-color: #707070;
    --table-border: #ddd;
    --highlight-color: #1c1b1b;
    --transparent: transparent;
    --input-field: #F0F0F0;
    --border-light: #e2e2e2;
    --link-blue: #4873bf;
    --border-extra-light: #eee;
    --border-medium: #dee2e6;
    --hover-dark: #505050;
    --text-dark: #333;
    --text-muted: #555555;
    --active-bg: #ccc;
    --table-button-hover-bg: #1f2a3a;

    /* === Layout === */
    --footer-height: 50px;
    --sidebar-width: 170px;
    --sidebar-collapsed-width: 55px;
    --navbar-height: 40px;
    --chat-expanded-width: 400px;
    --full-width: 100%;
    --full-height: 100%;
    --viewport-width: 100vw;
    --viewport-height: 100vh;

    /* === Typography === */
    --font-family: 'Poppins', sans-serif;
    --font-size-heading: 1.8rem;
    --font-size-subheading: 1.1em;
    --font-size-text: 12px;
    --font-size-base: 0.8rem;
    --font-size-main: 1rem;
    --font-small: normal normal normal 8px/15px var(--font-family);
    --font-medium: normal normal normal 10px/18px var(--font-family);
    --font-heading: normal normal 600 20px/33px var(--font-family);

    /* === Spacing === */
    --spacing-xs: 4px;
    --spacing-small: 5px;
    --spacing: 10px;
    --spacing-medium: 10px;
    --spacing-large: 20px;
    --spacing-xl: 40px;

    /* === Border Radius & Sizing === */
    --radius: 5px;
    --card-radius: 10px;
    --btn-radius: 8px;
    --button-border-radius: 5px;

    /* === Button Styles === */
    --button-bg-color: var(--primary-color);
    --button-hover-bg-color: var(--gold-color);
    --button-text-color: var(--white);
    --button-padding: 5px 10px;
    --button-height: 40px;

    /* === Transitions === */
    --basic-transition: 0.3s ease;
    --transform-transition: transform 0.3s ease;
    --color-transition: color 0.3s ease;
    --button-transition: background-color 0.3s ease, transform 0.3s ease;

    /* === Shadows === */
    --basic-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --sidebar-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
    --box-shadow-default: 0 1px 3px rgba(0,0,0,0.1);
    --box-shadow-card: 0 3px 12px rgba(0,0,0,0.04);
    --box-shadow-hover: 0 6px 18px rgba(0,0,0,0.08);

    /* === Gumo-style borders (for navbar glass effect) === */
    --color-border-light: #f3f4f6;
    --color-bg-card: #f8f9fa;
    --radius-md: 10px;
    --radius-sm: 6px;
    --sidebar-divider: rgba(255, 255, 255, 0.12);

    /* === Table Styles === */
    --table-header-bg: #f9f9f9;
    --table-row-hover: #f5f5f5;

    /* === EPC Colours === */
    --epc-a: #367C43;
    --epc-b: #519D3C;
    --epc-c: #A6C954;
    --epc-d: #FDF150;
    --epc-e: #ECB144;
    --epc-f: #DC7038;
    --epc-g: #D0362F;
    --epc-default: #e0e0e0;

    /* === Icons === */
    --icon-size: 25px;

    /* === Bootstrap Overrides === */
    --bs-primary-rgb: 167, 148, 121;
    --bs-spacing-0: 0px;
    --bs-spacing-1: 1px;
    --bs-spacing-2: 2px;
    --bs-spacing-3: 4px;
    --bs-spacing-4: 8px;
    --bs-spacing-5: 12px;

    /* === Backgrounds === */
    --bg-primary: var(--white) !important;
}

/* Dark theme overrides - see dark_theme.css for full implementation */