:root {
    /* =========================================================
       1. Brand Colors
    ========================================================== */
    /* ----- Base Color Tokens (Hardcoded) ----- */
    /* Primary */
    --color-primary: #ff6f00;
    --color-primary-dark: #b55b16;
    --color-primary-gradient: linear-gradient(to right, var(--color-primary), var(--color-primary-dark));
    --color-primary-contrast: #ffffff;
    /* Secondary */
    --color-secondary: #176ebb;
    --color-secondary-dark: #0f4a7a;
    --color-secondary-gradient: linear-gradient(to right, var(--color-secondary), var(--color-secondary-dark));
    --color-secondary-contrast: #ffffff;
    /* Accent */
    --color-accent: #1e88e5;
    --color-accent-dark: #1565a9;
    --color-accent-gradient: linear-gradient(to right, var(--color-accent), var(--color-accent-dark));
    /* Accent-blue*/
    --color-accent-blue: #1e88e5;
    --color-accent-blue-dark: #1565a9;
    --color-accent-blue-gradient: linear-gradient(to right, var(--color-accent-blue), var(--color-accent-blue-dark));
    /* Accent-green */
    --color-accent-green: #43a047;
    --color-accent-green-dark: #2e7031;
    --color-accent-green-gradient: linear-gradient(to right, var(--color-accent-green), var(--color-accent-green-dark));
    /* Accent-yellow */
    --color-accent-yellow: #fdd835;
    --color-accent-yellow-dark: #c6a700;
    --color-accent-yellow-gradient: linear-gradient(to right, var(--color-accent-yellow), var(--color-accent-yellow-dark));
    /* Accent-red */
    --color-accent-red: #e53935;
    --color-accent-red-dark: #ab1f1c;
    --color-accent-red-gradient: linear-gradient(to right, var(--color-accent-red), var(--color-accent-red-dark));
    /* Accent-purple */
    --color-accent-purple: #8e24aa;
    --color-accent-purple-dark: #611874;
    --color-accent-purple-gradient: linear-gradient(to right, var(--color-accent-purple), var(--color-accent-purple-dark));
    /* Accent-cyan */
    --color-accent-cyan: #00acc1;
    --color-accent-cyan-dark: #007888;
    --color-accent-cyan-gradient: linear-gradient(to right, var(--color-accent-cyan), var(--color-accent-cyan-dark));
    /* Basics */
    --color-white: #ffffff;
    --color-white-dark: #e0e0e0;
    --color-white-gradient: linear-gradient(to right, var(--color-white), var(--color-white-dark));
    /* black */
    --color-black: #000000;
    --color-black-dark: #222222;
    --color-black-gradient: linear-gradient(to right, var(--color-black), var(--color-black-dark));
    /* grey */
    --color-grey: #adb5bd;
    --color-grey-dark: #6c757d;
    --color-grey-gradient: linear-gradient(to right, var(--color-grey), var(--color-grey-dark));
    /* Dark */
    --color-dark: #1a1a1a;
    --color-dark-dark: #000000;
    --color-dark-gradient: linear-gradient(to right, var(--color-dark), var(--color-dark-dark));
    --color-dark-contrast: #ffffff;
    /* light */
    --color-light: #F2F3F2;
    --color-light-dark: #E5E6E4;
    --color-light-gradient: linear-gradient(to right, #F2F3F2, #E5E6E4);
    --color-light-contrast: #212529;
    /* Success */
    --color-success: #2e7d32;
    --color-success-dark: #1f5522;
    --color-success-gradient: linear-gradient(to right, var(--color-success), var(--color-success-dark));
    --color-success-contrast: #ffffff;
    /* Error */
    --color-error: #c62828;
    --color-error-dark: #8f1c1c;
    --color-error-gradient: linear-gradient(to right, var(--color-error), var(--color-error-dark));
    --color-error-contrast: #ffffff;
    /* Warning */
    --color-warning: #f9a825;
    --color-warning-dark: #b37c18;
    --color-warning-gradient: linear-gradient(to right, var(--color-warning), var(--color-warning-dark));
    --color-warning-contrast: #212529;
    /* Info */
    --color-info: #0277bd;
    --color-info-dark: #014f7d;
    --color-info-gradient: linear-gradient(to right, var(--color-info), var(--color-info-dark));
    --color-info-contrast: #ffffff;
    /* Page top bar (slightly darker than pagetop) */
    --color-pagetopbar: #E5E6E4;
    --color-pagetopbar-dark: #D6D7D5;
    --color-pagetopbar-gradient: linear-gradient(to right, var(--color-pagetopbar), var(--color-pagetopbar-dark));
    /* Page menu bar (same as pagetop) */
    --color-pagemenubar: #F2F3F2;
    --color-pagemenubar-dark: #E5E6E4;
    --color-pagemenubar-gradient: linear-gradient(to right, var(--color-pagemenubar), var(--color-pagemenubar-dark));
    --color-pagemenubar-hover-gradient: linear-gradient(to right, var(--color-pagemenubar), var(--color-pagemenubar-dark));
    /* Page footer bar (same as pagefooter) */
    --color-pagefooterbar: #0056b3;
    --color-pagefooterbar-dark: #003f88;
    --color-pagefooterbar-gradient: linear-gradient(to right, var(--color-pagefooterbar), var(--color-pagefooterbar-dark));
    /* Page bottom bar (slightly darker than pagefooter) */
    --color-pagebottombar: #1e88e5;
    --color-pagebottombar-dark: #002a5c;
    --color-pagebottombar-gradient: linear-gradient(to right, var(--color-pagebottombar), var(--color-pagebottombar-dark));
    /* mobile menu colors */
    --color-mobilemenu: #1e88e5;
    --color-mobilemenu-dark: #002a5c;
    --color-mobilemenu-gradient: linear-gradient(to right, var(--color-mobilemenu), var(--color-mobilemenu-dark));
    /* RGB tokens derived from base colors */
    --color-primary-rgb: 255, 111, 0;
    --color-secondary-rgb: 20, 40, 80;
    --color-success-rgb: 46, 125, 50;
    --color-error-rgb: 198, 40, 40;
    --color-warning-rgb: 249, 168, 37;
    --color-info-rgb: 2, 119, 189;
    --color-light-rgb: 248, 249, 250;
    --color-dark-rgb: 26, 26, 26;
    --color-white-rgb: 255, 255, 255;
    --color-black-rgb: 0, 0, 0;
    /* ----- Extended Hardcoded Tokens (Status / Utilities) ----- */
    --status-success-text: #1b5e20;
    --status-error-text: #8e0000;
    --status-warning-text: #f57f17;
    --status-info-text: #01579b;
    --status-neutral-soft: #f5f5f5;
    --status-neutral-strong: #9e9e9e;
    --status-neutral-text: #616161;
    --utility-overlay: rgba(0, 0, 0, 0.5);
    --utility-glass: rgba(255, 255, 255, 0.6);
    --utility-overlay-backdrop: rgba(0, 0, 0, 0.35);
    --utility-tooltip-fallback: #111111;
    --utility-interaction-hover: rgba(255, 111, 0, 0.1);
    --utility-interaction-active: rgba(255, 111, 0, 0.15);
    --utility-interaction-selected: #e65100;
    --utility-interaction-selected-bg: rgba(230, 81, 0, 0.2);
    /* ----- Derived Tokens (Calculated) ----- */
    --color-primary-hover: color-mix(in srgb, var(--color-primary) 80%, black 20%);
    --color-primary-focus: color-mix(in srgb, var(--color-primary) 60%, black 40%);
    --color-primary-active: color-mix(in srgb, var(--color-primary) 70%, black 30%);
    --color-primary-disabled: color-mix(in srgb, var(--color-primary) 40%, white 60%);
    --color-primary-soft: color-mix(in srgb, var(--color-primary) 10%, white 90%);
    --color-secondary-hover: color-mix(in srgb, var(--color-secondary) 80%, black 20%);
    --color-secondary-focus: color-mix(in srgb, var(--color-secondary) 60%, black 40%);
    --color-secondary-active: color-mix(in srgb, var(--color-secondary) 70%, black 30%);
    --color-secondary-disabled: color-mix(in srgb, var(--color-secondary) 40%, white 60%);
    --color-secondary-soft: color-mix(in srgb, var(--color-secondary) 10%, white 90%);
    --color-accent-blue-hover: color-mix(in srgb, var(--color-accent-blue) 80%, black 20%);
    --color-accent-green-hover: color-mix(in srgb, var(--color-accent-green) 80%, black 20%);
    --color-accent-yellow-hover: color-mix(in srgb, var(--color-accent-yellow) 80%, black 20%);
    --color-accent-red-hover: color-mix(in srgb, var(--color-accent-red) 80%, black 20%);
    --color-accent-purple-hover: color-mix(in srgb, var(--color-accent-purple) 80%, black 20%);
    --color-accent-cyan-hover: color-mix(in srgb, var(--color-accent-cyan) 80%, black 20%);
    --color-white-soft: color-mix(in srgb, var(--color-white) 90%, black);
    --color-white-muted: color-mix(in srgb, var(--color-white) 75%, black);
    --color-white-contrast: color-mix(in srgb, var(--color-white) 60%, black);
    --color-black-soft: color-mix(in srgb, var(--color-black) 90%, white);
    --color-black-muted: color-mix(in srgb, var(--color-black) 75%, white);
    --color-black-contrast: color-mix(in srgb, var(--color-black) 60%, white);
    --color-grey-50: color-mix(in srgb, var(--color-grey) 5%, white);
    --color-grey-100: color-mix(in srgb, var(--color-grey) 15%, white);
    --color-grey-200: color-mix(in srgb, var(--color-grey) 30%, white);
    --color-grey-300: color-mix(in srgb, var(--color-grey) 45%, white);
    --color-grey-400: color-mix(in srgb, var(--color-grey) 60%, white);
    --color-grey-500: var(--color-grey);
    --color-grey-600: color-mix(in srgb, var(--color-grey) 80%, black);
    --color-grey-700: color-mix(in srgb, var(--color-grey) 85%, black);
    --color-grey-800: color-mix(in srgb, var(--color-grey) 90%, black);
    --color-grey-900: color-mix(in srgb, var(--color-grey) 95%, black);
    --color-grey-hover: var(--color-grey-100);
    --color-grey-muted: var(--color-grey-400);
    --color-grey-dark: var(--color-grey-800);
    --color-grey-light: var(--color-grey-200);
    --color-grey-contrast: var(--color-grey-900);
    --color-dark-hover: color-mix(in srgb, var(--color-dark) 80%, white 20%);
    --color-dark-focus: color-mix(in srgb, var(--color-dark) 60%, white 40%);
    --color-dark-active: color-mix(in srgb, var(--color-dark) 70%, white 30%);
    --color-dark-disabled: color-mix(in srgb, var(--color-dark) 40%, white 60%);
    --color-dark-soft: color-mix(in srgb, var(--color-dark) 10%, white 90%);
    --color-light-hover: color-mix(in srgb, var(--color-light) 80%, black 20%);
    --color-light-focus: color-mix(in srgb, var(--color-light) 60%, black 40%);
    --color-light-active: color-mix(in srgb, var(--color-light) 70%, black 30%);
    --color-light-disabled: color-mix(in srgb, var(--color-light) 40%, black 60%);
    --color-light-soft: color-mix(in srgb, var(--color-light) 10%, black 90%);
    --color-success-hover: color-mix(in srgb, var(--color-success) 80%, black 20%);
    --color-success-soft: color-mix(in srgb, var(--color-success) 10%, white 90%);
    --color-error-hover: color-mix(in srgb, var(--color-error) 80%, black 20%);
    --color-error-soft: color-mix(in srgb, var(--color-error) 10%, white 90%);
    --color-warning-hover: color-mix(in srgb, var(--color-warning) 80%, black 20%);
    --color-warning-soft: color-mix(in srgb, var(--color-warning) 10%, white 90%);
    --color-info-hover: color-mix(in srgb, var(--color-info) 80%, black 20%);
    --color-info-soft: color-mix(in srgb, var(--color-info) 10%, white 90%);
    --color-primary-btn: var(--color-primary);
    --color-secondary-btn: var(--color-secondary);
    --color-outline-btn: var(--color-grey-300);
    --color-gradient-btn: var(--color-primary-gradient);
    /* =========================================================
       2. Typography
    ========================================================== */
    --font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-heading: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-monospace: 'Fira Code', 'Courier New', Courier, monospace;
    --font-size-xxs: 0.625rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2rem;
    --font-size-xxxl: 2.5rem;
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.75rem;
    --font-size-h4: 1.5rem;
    --font-size-h5: 1.25rem;
    --font-size-h6: 1rem;
    --line-height-base: 1.6;
    --line-height-heading: 1.25;
    --line-height-tight: 1.2;
    --line-height-relaxed: 1.75;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --letter-spacing-normal: normal;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;
    --text-transform-uppercase: uppercase;
    --text-transform-lowercase: lowercase;
    --text-transform-capitalize: capitalize;
    /* =========================================================
       3. Text Tokens
    ========================================================== */
    --text-color: var(--color-black); /* main text = black */
    --text-color-primary: #98521c; /* secondary info */
    --text-color-secondary: var(--color-grey-700); /* secondary info */
    --text-color-accent: var(--color-grey-700); /* secondary info */
    --text-color-Sucess: var(--color-grey-700); /* secondary info */
    --text-color-warning: var(--color-grey-700); /* secondary info */
    --text-color-muted: var(--color-grey-600); /* helper text */
    --text-color-subtle: var(--color-grey-500); /* labels, captions */
    --text-color-disabled: var(--color-grey-400); /* disabled states */
    --text-heading: var(--color-black); /* headings in true black */
    --text-body: var(--color-black); /* body text in black */
    --text-on-dark: var(--text-light);
    --text-on-dark-link: var(--text-link);
    --text-on-dark-link-hover: var(--text-link-hover);
    --text-on-light: var(--text-dark);
    --text-on-light-link: var(--text-link);
    --text-on-light-link-hover: var(--text-link-hover);
    --text-light: var(--color-white);
    --text-dark: var(--color-black);
    --text-inverse: var(--color-white);
    --text-link: var(--color-accent-blue);
    --text-link-hover: var(--color-accent-blue-hover);
    --text-highlight: var(--color-primary);
    --text-success: var(--color-success);
    --text-error: var(--color-error);
    --text-warning: var(--color-warning);
    --text-info: var(--color-info);
    --text-hover: var(--color-grey-800);
    --text-active: var(--color-black);
    --text-focus: var(--color-primary);
    /* =========================================================
       4. Surfaces & Backgrounds
    ========================================================== */
    --surface-0: var(--color-grey-50);
    --surface-1: var(--color-white);
    --surface-2: var(--color-grey-100);
    --surface-3: var(--color-grey-200);
    --surface-elevation-1: var(--color-grey-100);
    --surface-elevation-2: var(--color-grey-200);
    --surface-elevation-3: var(--color-grey-300);
    --surface-inverse: var(--color-grey-900);
    --surface-inverse-soft: var(--color-grey-800);
    --surface-card: var(--surface-1);
    --surface-header: var(--surface-2);
    --surface-footer: var(--surface-3);
    --surface-sidebar: var(--surface-2);
    --surface-modal: var(--surface-1);
    --surface-overlay: var(--utility-overlay);
    --surface-glass: var(--utility-glass);
    --surface-backdrop-blur: blur(8px);
    --surface-transparent: transparent;
    --surface-success-soft: var(--color-success-soft);
    --surface-error-soft: var(--color-error-soft);
    --surface-warning-soft: var(--color-warning-soft);
    --surface-info-soft: var(--color-info-soft);
    /* =========================================================
       5. Borders
    ========================================================== */
    --border-color: var(--color-grey-300);
    --border-color-muted: var(--color-grey-200);
    --border-color-strong: var(--color-grey-500);
    --border-color-inverse: var(--color-white);
    --border-color-transparent: transparent;
    --border-color-focus: var(--color-primary);
    --border-color-error: var(--color-error);
    --border-color-success: var(--color-success);
    --border-color-warning: var(--color-warning);
    --border-color-info: var(--color-info);
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;
    --border-style-default: solid;
    --border-style-muted: dashed;
    --border-style-strong: solid;
    --border-style-focus: solid;
    --border-style-error: solid;
    /* =========================================================
       6. Status Backgrounds
    ========================================================== */
    --status-success-strong: var(--color-success);
    --status-error-strong: var(--color-error);
    --status-warning-strong: var(--color-warning);
    --status-info-strong: var(--color-info);
    --status-success-soft: var(--color-success-soft);
    --status-error-soft: var(--color-error-soft);
    --status-warning-soft: var(--color-warning-soft);
    --status-info-soft: var(--color-info-soft);
    --status-bg-success-soft: var(--status-success-soft);
    --status-bg-success-strong: var(--status-success-strong);
    --status-bg-success-text: var(--status-success-text);
    --status-bg-error-soft: var(--status-error-soft);
    --status-bg-error-strong: var(--status-error-strong);
    --status-bg-error-text: var(--status-error-text);
    --status-bg-warning-soft: var(--status-warning-soft);
    --status-bg-warning-strong: var(--status-warning-strong);
    --status-bg-warning-text: var(--status-warning-text);
    --status-bg-info-soft: var(--status-info-soft);
    --status-bg-info-strong: var(--status-info-strong);
    --status-bg-info-text: var(--status-info-text);
    --status-bg-neutral-soft: var(--status-neutral-soft);
    --status-bg-neutral-strong: var(--status-neutral-strong);
    --status-bg-neutral-text: var(--status-neutral-text);
    /* =========================================================
       7. Spacing, Radius, Shadows, Layers
    ========================================================== */
    --space-xxs: 0.125rem;
    --space-xs: 0.375rem;
    --space-sm: 0.75rem;
    --space-md: 1.5rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
    --space-xxl: 8rem;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-xxl: 24px;
    --radius-rounded: 999px;
    --radius-pill: 50rem;
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.07);
    --shadow-sm: 0 3px 6px rgba(0, 0, 0, 0.10);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.22);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.30);
    --shadow-light: 6px 6px 12px rgba(0, 0, 0, 0.08);
    --shadow-light-invert: -6px -6px 12px rgba(255,255,255,0.7);
    --shadow-focus: 0 0 0 3px rgba(255,111,0,0.12);
    --shadow-inset: inset 0 4px 8px rgba(0, 0, 0, 0.06);
    --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.06);
    --elevation-0: none;
    --elevation-1: var(--shadow-xs);
    --elevation-2: var(--shadow-sm);
    --elevation-3: var(--shadow-md);
    --elevation-4: var(--shadow-lg);
    --elevation-5: var(--shadow-xl);
    --z-dropdown: 1100;
    --z-sticky: 1150;
    --z-fixed: 1200;
    --z-backdrop: 1250;
    --z-modal: 1300;
    --z-popover: 1350;
    --z-tooltip: 1400;
    /* =========================================================
       8. Motion & Interaction
    ========================================================== */
    --motion-duration-fast: 120ms;
    --motion-duration-medium: 250ms;
    --motion-duration-slow: 450ms;
    --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --motion-ease-accelerate: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --motion-ease-decelerate: cubic-bezier(0.215, 0.61, 0.355, 1);
    --motion-ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    --transition-default: all var(--motion-duration-medium) var(--motion-ease-standard);
    --animation-fade-in: fadeIn var(--motion-duration-medium) var(--motion-ease-standard);
    --animation-fade-out: fadeOut var(--motion-duration-medium) var(--motion-ease-standard);
    --overlay-backdrop-color: var(--utility-overlay-backdrop);
    --overlay-blur-effect: blur(10px);
    --interaction-hover: var(--utility-interaction-hover);
    --interaction-active: var(--utility-interaction-active);
    --interaction-selected-color: var(--utility-interaction-selected);
    --interaction-selected-bg: var(--utility-interaction-selected-bg);
    /* =========================================================
       9. Layout Containers
    ========================================================== */
    --container-xs: 360px;
    --container-sm: 600px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-xxl: 1440px;
    --container-fluid: 100%;
    /* =========================================================
       10. Breakpoints
    ========================================================== */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
    /* =========================================================
       11. Components
    ========================================================== */

    --btn-padding-sm: 0.25rem 0.75rem;
    --btn-padding-md: 0.5rem 1rem;
    --btn-padding-lg: 0.75rem 1.25rem;
    --btn-radius: var(--radius-md);
    --btn-shadow: var(--shadow-sm);
    --input-padding-sm: 0.375rem 0.75rem;
    --input-padding-md: 0.5rem 1rem;
    --input-padding-lg: 0.75rem 1.25rem;
    --input-radius: var(--radius-md);
    --input-border: var(--border-width-thin) var(--border-style-default) var(--border-color);
    --input-shadow: var(--shadow-xs);
    --card-padding: var(--space-md);
    --card-radius: var(--radius-lg);
    --card-shadow: var(--shadow-md);
    --modal-radius: var(--radius-lg);
    --modal-shadow: var(--shadow-lg);
    --modal-backdrop: var(--overlay-backdrop-color);
    --tooltip-padding: var(--space-xs) var(--space-sm);
    --tooltip-radius: var(--radius-sm);
    --tooltip-shadow: var(--shadow-xs);
    --tooltip-bg: var(--color-dark, var(--utility-tooltip-fallback));
    --tooltip-color: var(--color-white);
    /* =========================================================
       12. Utilities
    ========================================================== */
    --opacity-disabled: 0.6;
    --opacity-muted: 0.8;
    --opacity-hover: 0.9;
    --cursor-disabled: not-allowed;
    --cursor-pointer: pointer;
    --cursor-default: default;
    --backdrop-blur: blur(6px);
    --backdrop-brightness: brightness(0.8);
    /* =========================================================
       13. Menu Specific
    ========================================================== */
    --menu-separator: "|";
    --menu-separator-color: var(--text-color-muted);
    --menu-separator-opacity: 0.6;
    /* =========================================================
   14. Section Colors
   ======================================================== */
    /* ----- Body ----- */
    --body-color: #ffffff;
    --topbar-color: var(--color-pagetopbar-gradient);
    --menubar-color: var(--color-pagemenubar-gradient);
    --footerbar-color: var(--color-pagefooterbar-gradient);
    --bottombar-color: var(--color-pagebottombar-gradient);
    /* =========================================================
     15. Action Buttons (Semantic Tokens)
  ========================================================== */
    /* Add (positive, green) */
    --btn-add-bg: #219d74; /* vibrant green */
    --btn-add-color: #ffffff;
    --btn-add-hover: #107c58; /* darker green */
    /* Save (positive, green but different shade for hierarchy) */
    --btn-save-bg: #20c997; /* teal green */
    --btn-save-color: #ffffff;
    --btn-save-hover: #199c74;
    /* Edit (amber/orange) */
    --btn-edit-bg: #fd7e14; /* strong orange */
    --btn-edit-color: #ffffff;
    --btn-edit-hover: #e5670b;
    /* Search (blue) */
    --btn-search-bg: #0d6efd; /* bootstrap blue */
    --btn-search-color: #ffffff;
    --btn-search-hover: #0a58ca;
    /* View (indigo/blue for differentiation) */
    --btn-view-bg: #6610f2; /* deep indigo */
    --btn-view-color: #ffffff;
    --btn-view-hover: #520dc2;
    /* Delete (danger red) */
    --btn-delete-bg: #dc3545; /* strong red */
    --btn-delete-color: #ffffff;
    --btn-delete-hover: #bb2d3b;
    /* Cancel (neutral grey) */
    --btn-cancel-bg: #6c757d; /* mid-grey */
    --btn-cancel-color: #ffffff;
    --btn-cancel-hover: #565e64;
    /* === Compatibility aliases & missing tokens (paste into :root) === */
    --social-separator: var(--menu-separator);
    --social-separator-color: var(--menu-separator-color);
    --social-separator-opacity: var(--menu-separator-opacity);
}




/* =========================================================
  Bootstrap Overrides
========================================================= */
:root {
    /* Typography */
    --bs-body-font-family: var(--font-family-base);
    --bs-body-font-size: var(--font-size-base);
    --bs-body-font-weight: var(--font-weight-normal);
    --bs-body-line-height: var(--line-height-base);
    /* Colors */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-secondary: var(--color-secondary);
    --bs-secondary-rgb: var(--color-secondary-rgb);
    --bs-success: var(--color-success);
    --bs-success-rgb: var(--color-success-rgb);
    --bs-danger: var(--color-error);
    --bs-danger-rgb: var(--color-error-rgb);
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: var(--color-warning-rgb);
    --bs-info: var(--color-info);
    --bs-info-rgb: var(--color-info-rgb);
    --bs-light: var(--color-light);
    --bs-light-rgb: var(--color-light-rgb);
    --bs-dark: var(--color-dark);
    --bs-dark-rgb: var(--color-dark-rgb);
    /* Body */
    --bs-body-color: var(--text-dark);
    --bs-body-color-rgb: var(--color-black-rgb);
    --bs-body-bg: var(--surface-1);
    --bs-body-bg-rgb: var(--color-white-rgb);
    /* Headings */
    --bs-heading-color: var(--text-heading);
    /* Borders */
    --bs-border-color: var(--border-color);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-xl: var(--radius-xl);
    /* Links */
    --bs-link-color: var(--text-link);
    --bs-link-hover-color: var(--text-link-hover);
    /* Fonts */
    --bs-body-font-family-monospace: var(--font-family-monospace);
    /* Subtle variants */
    --bs-success-bg-subtle: var(--status-success-soft);
    --bs-success-border-subtle: var(--status-success-strong);
    --bs-success-text-emphasis: var(--status-success-text);
    --bs-danger-bg-subtle: var(--status-error-soft);
    --bs-danger-border-subtle: var(--status-error-strong);
    --bs-danger-text-emphasis: var(--status-error-text);
    --bs-warning-bg-subtle: var(--status-warning-soft);
    --bs-warning-border-subtle: var(--status-warning-strong);
    --bs-warning-text-emphasis: var(--status-warning-text);
    --bs-info-bg-subtle: var(--status-info-soft);
    --bs-info-border-subtle: var(--status-info-strong);
    --bs-info-text-emphasis: var(--status-info-text);
}