/* ═══════════════════════════════════════════════════════════════════════════
   BeautyPro Design Tokens v2.0
   Single source of truth for all colors, spacing, typography, and effects.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ============================================
   1. Primitive Color Tokens
   Raw color values — never use directly in components.
   ============================================ */
:root {
    /* ── Brand (Primary Identity #D4A5A5) ── */
    --brand-50:  #FDF5F5;
    --brand-100: #FAE8E8;
    --brand-200: #F0D4D4;
    --brand-300: #E8C4C4;
    --brand-400: #DCB2B2;
    --brand-500: #D4A5A5;
    --brand-600: #C08B8B;
    --brand-700: #A07070;
    --brand-800: #8B5E5E;
    --brand-900: #6B4A4A;

    /* ── Teal (Secondary/Legacy) ── */
    --teal-50:  #E8F4F4;
    --teal-100: #C5E4E4;
    --teal-200: #9FD2D2;
    --teal-300: #78BFBF;
    --teal-400: #5FBDBD;
    --teal-500: #D4A5A5;
    --teal-600: #2D8B8B;
    --teal-700: #A07070;
    --teal-800: #8B5E5E;
    --teal-900: #134343;

    /* ── Slate (Neutrals) ── */
    --slate-50:  #F7FAFC;
    --slate-100: #EDF2F7;
    --slate-200: #E2E8F0;
    --slate-300: #CBD5E0;
    --slate-400: #A0AEC0;
    --slate-500: #718096;
    --slate-600: #4A5568;
    --slate-700: #2D3748;
    --slate-800: #1A202C;
    --slate-900: #171923;

    /* ── Dark Slate (Sidebar / Dark surfaces) ── */
    --dark-50:  #3E5060;
    --dark-100: #354555;
    --dark-200: #2C3E50;
    --dark-300: #24333F;
    --dark-400: #1E2B36;
    --dark-500: #1A252F;
    --dark-600: #151E27;
    --dark-700: #10171E;
    --dark-800: #0B1015;
    --dark-900: #060A0D;

    /* ── Green (Success) ── */
    --green-50:  #F0FFF4;
    --green-100: #C6F6D5;
    --green-200: #9AE6B4;
    --green-300: #68D391;
    --green-400: #48BB78;
    --green-500: #38A169;
    --green-600: #2F855A;
    --green-700: #276749;
    --green-800: #22543D;
    --green-900: #1C4532;

    /* ── Yellow/Amber (Warning) ── */
    --yellow-50:  #FFFFF0;
    --yellow-100: #FEFCBF;
    --yellow-200: #FAF089;
    --yellow-300: #F6E05E;
    --yellow-400: #ECC94B;
    --yellow-500: #D69E2E;
    --yellow-600: #B7791F;
    --yellow-700: #975A16;
    --yellow-800: #744210;
    --yellow-900: #5F370E;

    /* ── Red (Danger) ── */
    --red-50:  #FFF5F5;
    --red-100: #FED7D7;
    --red-200: #FEB2B2;
    --red-300: #FC8181;
    --red-400: #F56565;
    --red-500: #E53E3E;
    --red-600: #C53030;
    --red-700: #9B2C2C;
    --red-800: #822727;
    --red-900: #63171B;

    /* ── Blue (Info) ── */
    --blue-50:  #EBF8FF;
    --blue-100: #BEE3F8;
    --blue-200: #90CDF4;
    --blue-300: #63B3ED;
    --blue-400: #4299E1;
    --blue-500: #3182CE;
    --blue-600: #2B6CB0;
    --blue-700: #2C5282;
    --blue-800: #2A4365;
    --blue-900: #1A365D;

    /* ── Rose (Landing / Marketing accent) ── */
    --rose-50:  #FDF5F5;
    --rose-100: #FAE8E8;
    --rose-200: #F0D4D4;
    --rose-300: #E8C4C4;
    --rose-400: #DCB2B2;
    --rose-500: #D4A5A5;
    --rose-600: #C08B8B;
    --rose-700: #A07070;
    --rose-800: #8B5E5E;
    --rose-900: #6B4A4A;

    /* ── Fixed Colors ── */
    --white: #FFFFFF;
    --black: #000000;
}

/* ============================================
   2. Semantic Tokens — Light Mode (default)
   Use THESE in components. They flip in dark mode.
   ============================================ */
:root {
    /* ── Backgrounds ── */
    --color-bg-body:        var(--slate-50);
    --color-bg-primary:     var(--white);
    --color-bg-secondary:   var(--slate-100);
    --color-bg-tertiary:    var(--slate-200);
    --color-bg-inverse:     var(--dark-200);
    --color-bg-overlay:     rgba(0, 0, 0, 0.5);
    --color-bg-overlay-light: rgba(255, 255, 255, 0.85);

    /* ── Text ── */
    --color-text-primary:   var(--slate-800);
    --color-text-secondary: var(--slate-600);
    --color-text-tertiary:  var(--slate-500);
    --color-text-muted:     var(--slate-400);
    --color-text-inverse:   var(--white);
    --color-text-on-accent:  var(--white);

    /* ── Accent (Brand Identity) ── */
    --color-accent:         var(--brand-500);
    --color-accent-hover:   var(--brand-600);
    --color-accent-active:  var(--brand-700);
    --color-accent-subtle:  var(--brand-50);
    --color-accent-muted:   var(--brand-100);
    --color-accent-light:   var(--brand-400);
    --color-accent-rgb:     212, 165, 165;

    /* ── Status: Success ── */
    --color-success:        var(--green-500);
    --color-success-hover:  var(--green-600);
    --color-success-subtle: var(--green-50);
    --color-success-muted:  var(--green-100);
    --color-success-text:   var(--green-700);

    /* ── Status: Warning ── */
    --color-warning:        var(--yellow-500);
    --color-warning-hover:  var(--yellow-600);
    --color-warning-subtle: var(--yellow-50);
    --color-warning-muted:  var(--yellow-100);
    --color-warning-text:   var(--yellow-700);

    /* ── Status: Danger ── */
    --color-danger:         var(--red-500);
    --color-danger-hover:   var(--red-600);
    --color-danger-subtle:  var(--red-50);
    --color-danger-muted:   var(--red-100);
    --color-danger-text:    var(--red-700);

    /* ── Status: Info ── */
    --color-info:           var(--blue-500);
    --color-info-hover:     var(--blue-600);
    --color-info-subtle:    var(--blue-50);
    --color-info-muted:     var(--blue-100);
    --color-info-text:      var(--blue-700);

    /* ── Borders ── */
    --color-border:         var(--slate-200);
    --color-border-light:   var(--slate-100);
    --color-border-medium:  var(--slate-300);
    --color-border-dark:    var(--slate-400);
    --color-border-accent:  rgba(212, 165, 165, 0.25);
    --color-border-accent-strong: rgba(212, 165, 165, 0.4);

    /* ── Focus Ring ── */
    --color-focus-ring:     rgba(212, 165, 165, 0.35);
    --color-focus-ring-danger: rgba(229, 62, 62, 0.35);
}

/* ============================================
   3. Component Tokens
   Specific to UI components — derived from semantics.
   ============================================ */
:root {
    /* ── Card ── */
    --card-bg:              var(--color-bg-primary);
    --card-border:          var(--color-border-accent);
    --card-shadow:          0 4px 20px rgba(0, 0, 0, 0.04);
    --card-shadow-hover:    0 8px 30px rgba(0, 0, 0, 0.08);
    --card-radius:          16px;
    --card-header-bg:       linear-gradient(135deg, rgba(212, 165, 165, 0.05) 0%, rgba(212, 165, 165, 0.08) 100%);
    --card-header-border:   var(--color-border-accent);
    --card-header-color:    var(--color-text-primary);
    --card-padding:         1.5rem;
    --card-padding-sm:      1rem;

    /* ── Button ── */
    --btn-radius:           10px;
    --btn-radius-pill:      9999px;
    --btn-padding-x:        1.25rem;
    --btn-padding-y:        0.625rem;
    --btn-padding-x-sm:     0.875rem;
    --btn-padding-y-sm:     0.375rem;
    --btn-padding-x-lg:     2rem;
    --btn-padding-y-lg:     0.875rem;
    --btn-font-weight:      600;
    --btn-shadow:           0 4px 15px rgba(212, 165, 165, 0.3);
    --btn-shadow-hover:     0 6px 20px rgba(212, 165, 165, 0.4);

    /* ── Input / Form ── */
    --input-bg:             var(--white);
    --input-border:         var(--color-border);
    --input-border-focus:   var(--color-accent);
    --input-radius:         10px;
    --input-padding-x:      1rem;
    --input-padding-y:      0.75rem;
    --input-shadow-focus:   0 0 0 3px var(--color-focus-ring);
    --input-placeholder:    var(--slate-400);

    /* ── Table ── */
    --table-header-bg:      linear-gradient(135deg, rgba(212, 165, 165, 0.08) 0%, rgba(212, 165, 165, 0.12) 100%);
    --table-header-color:   var(--color-text-primary);
    --table-header-border:  rgba(212, 165, 165, 0.15);
    --table-row-hover:      rgba(212, 165, 165, 0.04);
    --table-border:         var(--color-border-light);
    --table-radius:         12px;

    /* ── Badge ── */
    --badge-radius:         8px;
    --badge-padding-x:      0.75rem;
    --badge-padding-y:      0.35rem;
    --badge-font-size:      0.8125rem;
    --badge-font-weight:    600;

    /* ── Modal ── */
    --modal-radius:         16px;
    --modal-shadow:         0 20px 60px rgba(0, 0, 0, 0.2);
    --modal-header-bg:      linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
    --modal-header-color:   var(--white);
    --modal-footer-bg:      var(--slate-50);
    --modal-body-padding:   1.75rem;

    /* ── Alert ── */
    --alert-radius:         12px;
    --alert-padding:        1rem 1.25rem;
    --alert-border-width:   4px;

    /* ── Sidebar ── */
    --sidebar-width:        260px;
    --sidebar-collapsed:    80px;
    --sidebar-bg:           linear-gradient(180deg, var(--dark-200) 0%, var(--dark-500) 100%);
    --sidebar-hover:        rgba(212, 165, 165, 0.15);
    --sidebar-active:       linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
    --sidebar-active-shadow: 0 4px 15px rgba(212, 165, 165, 0.3);
    --sidebar-text:         rgba(255, 255, 255, 0.75);
    --sidebar-text-hover:   var(--white);
    --sidebar-text-muted:   var(--slate-400);
    --sidebar-border:       rgba(212, 165, 165, 0.2);
    --sidebar-submenu-bg:   rgba(212, 165, 165, 0.08);
    --sidebar-submenu-border: rgba(212, 165, 165, 0.1);
    --sidebar-scrollbar:    rgba(212, 165, 165, 0.3);
    --sidebar-scrollbar-hover: rgba(212, 165, 165, 0.5);

    /* ── Topbar ── */
    --topbar-bg:            rgba(255, 255, 255, 0.95);
    --topbar-shadow:        0 2px 15px rgba(0, 0, 0, 0.05);
    --topbar-border:        rgba(212, 165, 165, 0.1);
    --topbar-height:        auto;

    /* ── Quick Access Bar (floating) ── */
    --qab-bg:               rgba(44, 62, 80, 0.92);
    --qab-shadow:           0 8px 32px rgba(0, 0, 0, 0.22);
    --qab-radius:           18px;

    /* ── Dropdown ── */
    --dropdown-bg:          var(--white);
    --dropdown-border:      var(--color-border-accent);
    --dropdown-shadow:      0 8px 30px rgba(0, 0, 0, 0.1);
    --dropdown-radius:      12px;
    --dropdown-hover:       rgba(212, 165, 165, 0.08);
    --dropdown-active-color: var(--color-accent);

    /* ── Pagination ── */
    --pagination-color:     var(--color-accent);
    --pagination-border:    var(--color-border-accent);
    --pagination-active-bg: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
    --pagination-active-border: var(--brand-600);

    /* ── Nav Tabs ── */
    --tab-active-color:     var(--color-accent);
    --tab-active-border:    var(--brand-600);
    --tab-hover-border:     rgba(212, 165, 165, 0.3);
}

/* ============================================
   4. Spacing Scale
   ============================================ */
:root {
    --space-0:   0;
    --space-px:  1px;
    --space-0-5: 0.125rem;   /* 2px */
    --space-1:   0.25rem;    /* 4px */
    --space-1-5: 0.375rem;   /* 6px */
    --space-2:   0.5rem;     /* 8px */
    --space-2-5: 0.625rem;   /* 10px */
    --space-3:   0.75rem;    /* 12px */
    --space-3-5: 0.875rem;   /* 14px */
    --space-4:   1rem;       /* 16px */
    --space-5:   1.25rem;    /* 20px */
    --space-6:   1.5rem;     /* 24px */
    --space-7:   1.75rem;    /* 28px */
    --space-8:   2rem;       /* 32px */
    --space-10:  2.5rem;     /* 40px */
    --space-12:  3rem;       /* 48px */
    --space-16:  4rem;       /* 64px */
    --space-20:  5rem;       /* 80px */
}

/* ============================================
   5. Typography
   ============================================ */
:root {
    --font-sans:    'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Cairo', 'Inter', sans-serif;
    --font-mono:    'Fira Code', 'Consolas', monospace;

    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */
    --text-4xl:  2.25rem;    /* 36px */

    --leading-none:   1;
    --leading-tight:  1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    --font-light:     300;
    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;
    --font-extrabold: 800;
}

/* ============================================
   6. Shadows
   ============================================ */
:root {
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 8px 30px rgba(0, 0, 0, 0.1);
    --shadow-xl:  0 16px 50px rgba(0, 0, 0, 0.12);
    --shadow-2xl: 0 25px 60px rgba(0, 0, 0, 0.18);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-accent: 0 4px 15px rgba(212, 165, 165, 0.25);
    --shadow-accent-lg: 0 8px 30px rgba(212, 165, 165, 0.3);
    --shadow-none: none;
}

/* ============================================
   7. Border Radius
   ============================================ */
:root {
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;
}

/* ============================================
   8. Transitions
   ============================================ */
:root {
    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   9. Z-Index Scale
   ============================================ */
:root {
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   500;
    --z-modal:     1000;
    --z-popover:   1100;
    --z-tooltip:   1200;
    --z-sidebar:   1000;
    --z-topbar:    100;
    --z-loading:   99999;
    --z-qab:       9999;
}

/* ============================================
   10. Gradients (reusable)
   ============================================ */
:root {
    --gradient-accent:      linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
    --gradient-accent-bold: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
    --gradient-success:     linear-gradient(135deg, var(--green-400) 0%, var(--green-500) 100%);
    --gradient-warning:     linear-gradient(135deg, var(--yellow-400) 0%, var(--yellow-500) 100%);
    --gradient-danger:      linear-gradient(135deg, var(--red-300) 0%, var(--red-500) 100%);
    --gradient-info:        linear-gradient(135deg, var(--blue-300) 0%, var(--blue-500) 100%);
    --gradient-dark:        linear-gradient(180deg, var(--dark-200) 0%, var(--dark-500) 100%);
    --gradient-surface:     linear-gradient(135deg, rgba(212, 165, 165, 0.05) 0%, rgba(212, 165, 165, 0.08) 100%);
}

/* ============================================
   11. Dark Mode Override Layer
   Activate with <html data-theme="dark">
   ============================================ */
[data-theme="dark"] {
    --color-bg-body:        var(--dark-500);
    --color-bg-primary:     var(--dark-200);
    --color-bg-secondary:   var(--dark-300);
    --color-bg-tertiary:    var(--dark-400);
    --color-bg-inverse:     var(--slate-100);
    --color-bg-overlay:     rgba(0, 0, 0, 0.7);
    --color-bg-overlay-light: rgba(0, 0, 0, 0.6);

    --color-text-primary:   var(--slate-100);
    --color-text-secondary: var(--slate-300);
    --color-text-tertiary:  var(--slate-400);
    --color-text-muted:     var(--slate-500);
    --color-text-inverse:   var(--slate-800);

    --color-accent:         var(--brand-400);
    --color-accent-hover:   var(--brand-300);
    --color-accent-active:  var(--brand-500);
    --color-accent-subtle:  rgba(45, 139, 139, 0.12);
    --color-accent-muted:   rgba(45, 139, 139, 0.2);

    --color-success-subtle: rgba(56, 161, 105, 0.12);
    --color-success-muted:  rgba(56, 161, 105, 0.2);
    --color-warning-subtle: rgba(214, 158, 46, 0.12);
    --color-warning-muted:  rgba(214, 158, 46, 0.2);
    --color-danger-subtle:  rgba(229, 62, 62, 0.12);
    --color-danger-muted:   rgba(229, 62, 62, 0.2);
    --color-info-subtle:    rgba(49, 130, 206, 0.12);
    --color-info-muted:     rgba(49, 130, 206, 0.2);

    --color-border:         var(--dark-50);
    --color-border-light:   var(--dark-100);
    --color-border-medium:  var(--dark-50);
    --color-border-dark:    var(--slate-500);
    --color-border-accent:  rgba(45, 139, 139, 0.3);

    --card-bg:              var(--color-bg-primary);
    --card-border:          var(--color-border-accent);
    --card-shadow:          0 4px 20px rgba(0, 0, 0, 0.2);
    --card-shadow-hover:    0 8px 30px rgba(0, 0, 0, 0.3);
    --card-header-bg:       rgba(45, 139, 139, 0.1);
    --card-header-color:    var(--color-text-primary);

    --input-bg:             var(--dark-300);
    --input-border:         var(--dark-50);
    --input-placeholder:    var(--slate-500);

    --table-header-bg:      rgba(45, 139, 139, 0.1);
    --table-row-hover:      rgba(45, 139, 139, 0.08);
    --table-border:         var(--dark-50);

    --modal-footer-bg:      var(--dark-300);

    --topbar-bg:            rgba(26, 37, 47, 0.95);
    --topbar-shadow:        0 2px 15px rgba(0, 0, 0, 0.2);

    --dropdown-bg:          var(--dark-200);
    --dropdown-hover:       rgba(45, 139, 139, 0.12);
}

/* ============================================
   12. Landing / Marketing Theme Override
   Use on landing pages: <body class="landing-theme">
   ============================================ */
.landing-theme {
    --color-accent:         var(--rose-500);
    --color-accent-hover:   var(--rose-600);
    --color-accent-active:  var(--rose-700);
    --color-accent-subtle:  var(--rose-50);
    --color-accent-muted:   var(--rose-100);
    --color-accent-rgb:     212, 165, 165;

    --gradient-accent:      linear-gradient(135deg, var(--rose-300) 0%, var(--rose-500) 100%);
    --gradient-accent-bold: linear-gradient(135deg, var(--rose-500) 0%, var(--rose-600) 100%);

    --shadow-accent:        0 4px 15px rgba(212, 165, 165, 0.25);
    --shadow-accent-lg:     0 8px 30px rgba(212, 165, 165, 0.3);

    --btn-shadow:           0 4px 15px rgba(212, 165, 165, 0.3);
    --btn-shadow-hover:     0 6px 20px rgba(212, 165, 165, 0.4);

    --color-focus-ring:     rgba(212, 165, 165, 0.35);
}

/* ============================================
   13. Backward Compatibility Aliases
   Maps old variable names → new tokens.
   Remove after full migration.
   ============================================ */
:root {
    /* beautypro-professional.css aliases */
    --bp-primary:       var(--color-accent);
    --bp-primary-dark:  var(--color-accent-hover);
    --bp-primary-light: var(--color-accent-subtle);
    --bp-success:       var(--color-success);
    --bp-warning:       var(--color-warning);
    --bp-danger:        var(--color-danger);
    --bp-info:          var(--color-info);
    --bp-bg-primary:    var(--color-bg-primary);
    --bp-bg-secondary:  var(--color-bg-secondary);
    --bp-text-primary:  var(--color-text-primary);
    --bp-text-secondary: var(--color-text-secondary);
    --bp-text-muted:    var(--color-text-muted);
    --bp-border-light:  var(--color-border-light);
    --bp-border-medium: var(--color-border);
    --bp-border-dark:   var(--color-border-dark);

    /* Old --primary-NNN aliases (used in professional.css) */
    --primary-50:  var(--brand-50);
    --primary-100: var(--brand-100);
    --primary-200: var(--brand-200);
    --primary-300: var(--brand-300);
    --primary-400: var(--brand-400);
    --primary-500: var(--brand-500);
    --primary-600: var(--brand-600);
    --primary-700: var(--brand-700);
    --primary-800: var(--brand-800);
    --primary-900: var(--brand-900);

    /* Old --success/warning/danger/info-NNN */
    --success-50:  var(--green-50);
    --success-100: var(--green-100);
    --success-200: var(--green-200);
    --success-400: var(--green-400);
    --success-500: var(--green-500);
    --success-600: var(--green-600);
    --success-700: var(--green-700);

    --warning-50:  var(--yellow-50);
    --warning-100: var(--yellow-100);
    --warning-400: var(--yellow-400);
    --warning-500: var(--yellow-500);
    --warning-600: var(--yellow-600);
    --warning-700: var(--yellow-700);

    --danger-50:  var(--red-50);
    --danger-100: var(--red-100);
    --danger-400: var(--red-400);
    --danger-500: var(--red-500);
    --danger-600: var(--red-600);
    --danger-700: var(--red-700);

    --info-50:  var(--blue-50);
    --info-100: var(--blue-100);
    --info-400: var(--blue-400);
    --info-500: var(--blue-500);
    --info-600: var(--blue-600);
    --info-700: var(--blue-700);

    /* Old --neutral-NNN (maps to slate) */
    --neutral-50:  var(--slate-50);
    --neutral-100: var(--slate-100);
    --neutral-200: var(--slate-200);
    --neutral-300: var(--slate-300);
    --neutral-400: var(--slate-400);
    --neutral-500: var(--slate-500);
    --neutral-600: var(--slate-600);
    --neutral-700: var(--slate-700);
    --neutral-800: var(--slate-800);
    --neutral-900: var(--slate-900);

    /* Missing shade aliases */
    --success-200: var(--green-200);
    --success-800: var(--green-800);
    --warning-200: var(--yellow-200);
    --warning-800: var(--yellow-800);
    --danger-200:  var(--red-200);
    --danger-800:  var(--red-800);
    --info-200:    var(--blue-200);
    --info-800:    var(--blue-800);

    /* --bp-text-white alias */
    --bp-text-white: var(--white);

    /* Dashboard gradient/surface aliases */
    --dashboard-gradient-hero:   linear-gradient(135deg, #8B5E5E 0%, #A07070 55%, #D4A5A5 100%);
    --dashboard-gradient-accent: linear-gradient(135deg, #6B4A4A 0%, #A07070 52%, #D4A5A5 100%);
    --dashboard-surface-muted:   linear-gradient(180deg, #FBFCFD 0%, #FDF5F5 100%);
    --dashboard-focus-ring:      0 0 0 3px rgba(212, 165, 165, 0.16);
    --dashboard-floating-bg:     var(--qab-bg);
    --dashboard-floating-border: rgba(212, 237, 236, 0.18);

    /* Accent color alias */
    --accent-color: var(--brand-600);

    /* admin-sidebar.css aliases */
    --primary-color:  var(--brand-600);
    --primary-dark:   var(--brand-700);
    --primary-light:  var(--brand-50);
    --fem-nude:        var(--slate-100);
    --fem-taupe:       var(--slate-300);
    --fem-mauve:       var(--slate-500);
    --text-muted:      var(--slate-400);
    --text-light:      rgba(255, 255, 255, 0.7);
    --body-bg:         var(--color-bg-body);
    --card-bg-legacy:  var(--color-bg-primary);

    /* beauty-theme.css aliases */
    --color-bg-tertiary-legacy: var(--color-bg-tertiary);

    /* beautypro-enhanced.css spacing aliases */
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-4);
    --space-lg: var(--space-6);
    --space-xl: var(--space-8);
}