:root {
    /* 🎨 Primary Colors */
    --primary-color: #001f54; /* Buttons */
    --primary-hover: #002C77; /* Buttons on hover */
    --primary-bg: #343A40;
    --secondary-bg: #abb1b6;
    --secondary-color: #666;     /* Essentially --text-muted, useful for clarity */
    --secondary-hover: #afafaf; /* A valid hover color for secondary buttons */
    --dashboard-color: #03037f; /* Dashboard button */
    --background-backdrop: #f7f7f7;
    --icon-active:#218838;
    --icon-inactive: red;

    /* --- Soft Green --- */
    --alerts-success-bg: #D4EDDA;         /* Light green background */
    --alerts-success-text: #155724;       /* Dark green text for readability */
    --alerts-success-border: #28A745;     /* Medium green border */
    --alerts-success-hover-bg: #C3E6CB;   /* Slightly darker green background on hover */

    /* --- Warning --- */
    --alerts-warning-bg: #E4D9FF;         /* Light lavender/purple background */
    --alerts-warning-text: #4C2980;       /* Dark purple text for readability */
    --alerts-warning-border: #9966CC;     /* Medium purple border */
    --alerts-warning-hover-bg: #D5C4F7;   /* Slightly darker lavender background on hover */

    /* --- Soft Blue --- */
    --alerts-info-bg: #CCE5FF;            /* Light blue background */
    --alerts-info-text: #004085;          /* Dark blue text for readability */
    --alerts-info-border: #B8DAFF;        /* Medium blue border */
    --alerts-info-hover-bg: #BBD6EC;      /* Slightly darker blue background on hover */

    /* --- Error --- */
    --alerts-error-bg: #FFF3CD;           /* Light yellow background */
    --alerts-error-text: #664D03;         /* Dark yellow/brown text for readability */
    --alerts-error-border: #FFECB3;       /* Medium yellow border */
    --alerts-error-hover-bg: #FFE9B8;     /* Slightly darker yellow background on hover */

    /* --- Danger --- */
    --alerts-danger-bg: #F8D7DA;          /* Light red background */
    --alerts-danger-text: #721C24;        /* Dark red text */
    --alerts-danger-border: #A71D2A;      /* Darker red border */
    --alerts-danger-hover-bg: #F5C6CB;    /* Slightly darker red background on hover */

    --padding-alerts: 5px 30px;


    /* 📝 Font Colors */
    --text-color-default: #ffffff;
    --text-dark: var(--primary-bg); /* Headings */
    --search-field: #f7f7f7;
    --text-muted: #666; /* Muted text */
    --text-highlight: red;
  
    /* 🔘 Button Colors */
    --button-action: #0064F5; /* Success buttons/messages */
    --button-action-hover: #0155CF;
    --button-action-faded: #3271CC;
    --button-primary: #007FFF;
    --button-primary-hover: #0059B3;
    --button-add: #C3D58C;
    --button-add-hover:#9DAE61;
    --button-edit: #DA8DAE;
    --button-edit-hover: #d27890;
    --button-delete: #3C90B0;
    --button-delete-hover: #164457;

    /* 🧱 Background Colors */
    --bg-dark: #22242A;
    --bg-light: #fff; /* Main background */
    --bg-subtle: #f4f2f2; /* Subtle background */
    --bg-success: #e6f4ea;
    --bg-danger: #f8d7da;
    --background-muted: #f9f9f9; /* Muted background for info items */
  
    /* 📏 Borders & Shadows */
    --border-color: #ced4da; /* Form borders */
    --shadow-light: 0 2px 4px rgba(244, 242, 242, 0.785);
    --shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.1); /* General subtle shadow */
    --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-box: 3px 3px 8px rgba(0, 0, 0, 0.5);
    --shadow-btn: 0px 4px 8px rgba(0, 123, 255, 0.2); /* Button shadow */
    --shadow-primary: 0 0 10px var(--primary-color);
    --shadow-primary-hover: 0 0 10px var(--primary-hover); /* Hover effect */
  
    /* 📐 Spacing */
    --spacing-xxs: 0.3rem;
    --spacing-xs: 0.5rem; /* 8px */
    --spacing-sm: 0.625rem; /* 10px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.25rem;   /* 20px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-xxl: 3rem;      
    --spacing-xxxl: 3.5rem;
  
    /* 🔁 Standard Gap Sizes */
    --gap-xxs: var(--spacing-xxs);
    --gap-xs: var(--spacing-xs);
    --gap-sm: var(--spacing-sm);
    --gap-md: var(--spacing-md);
    --gap-lg: var(--spacing-lg);
    --gap-xl: var(--spacing-xl);
    --gap-xxl: var(--spacing-xxl);

    /* ⭕ Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
  
    /* 🔤 Typography */
    --font-family: 'Roboto', sans-serif;
    --font-size-xs: 8px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 24px;
    --font-size-xxl: 42px;

    --muted-font-weight: 250;
    --heading-font-weight: 500;
    --button-font-weight: 600;
    --title-font-weight: 700;
    
    /* Layout Specific Variables */
    --navbar-height: 100px; /* UPDATED: Standard Bootstrap navbar height */
    --footer-height: 60px; /* Height of your footer */

    /* Transformations & Transitions*/
    --background-color-initial: var(--button-action);
    --background-color-final: var(--button-action-hover);
    --text-color-initial: var(--text-color-default);
    --text-color-final: var(--text-color-default);
    --box-shadow-initial: none;
    --box-shadow-final: var(--button-action-faded);
    --transform-initial-state: transform: translateY(0);
    --transform-final: translateY(-2px);
    --transition-fast: background-color 0.3s ease;
    --transition-ease: background-color 0.3s ease, transform 0.2s ease;

    /* Focus Outlines */
    --gap-between-button-edge-and-focus-outline: 2px;
    --accessibility-focus-outline: var(--button-edge-and-focus-outline-gap) solid var(--button-action);

    /* --- Button Sizing --- */
    --button-standard-width: 120px; /* A fixed width for standard buttons */
    --button-full-width: 100%;     /* For a button that takes full available width */
    --button-medium-width: 75%;
    --button-small-width: 50%;
    --button-margin-vertical: 5px;   /* For top and bottom margins */
    --button-margin-horizontal: 10px; /* For left and right margins */
    --button-margin: var(--button-margin-vertical) var(--button-margin-horizontal); /* Combined for */

  }