/* =============================================================================
   variables.css — Design System Oficial LessBeauti
   Basado en Diseños.png — Manual de diseño oficial
   ============================================================================= */

:root {
  /* Paleta inspirada en el frontend public del salón */
  --navy-950: #060a17;
  --navy-900: #0a1128;
  --navy-800: #131b3a;
  --navy-700: #1c2650;
  --steel-500: #4a5578;
  --silver-300: #c9ccd6;
  --silver-100: #e8e9ee;
  --white: #f5f6f8;
  --line: rgba(201, 204, 214, 0.16);

  --lb-rosa: #d9b67a;
  --lb-rosa-hover: #b88b3f;
  --lb-rosa-claro: rgba(217, 182, 122, 0.24);
  --lb-rosa-suave: rgba(217, 182, 122, 0.14);
  --lb-rosa-pale: rgba(217, 182, 122, 0.10);

  --lb-morado: #cfd8e7;
  --lb-morado-oscuro: #f5f6f8;
  --lb-morado-hover: #a0b0c6;
  --lb-morado-claro: rgba(207, 216, 231, 0.16);

  --lb-blanco: var(--white);
  --lb-fondo: var(--navy-950);
  --lb-surface: rgba(10, 17, 40, 0.92);
  --lb-borde: var(--line);
  --lb-borde-fuerte: rgba(201, 204, 214, 0.24);
  --lb-texto: var(--white);
  --lb-texto-sec: var(--silver-300);
  --lb-muted: #8d96ad;
  --lb-placeholder: #6f788d;

  --lb-exito: #2fbf87;
  --lb-exito-bg: rgba(47, 191, 135, 0.16);
  --lb-exito-borde: rgba(47, 191, 135, 0.28);
  --lb-error: #ff6c6c;
  --lb-error-bg: rgba(255, 108, 108, 0.16);
  --lb-error-borde: rgba(255, 108, 108, 0.24);
  --lb-warning: #f2c777;
  --lb-warning-bg: rgba(242, 199, 119, 0.16);
  --lb-warning-borde: rgba(242, 199, 119, 0.24);
  --lb-info: #8bb3ff;
  --lb-info-bg: rgba(139, 179, 255, 0.16);
  --lb-info-borde: rgba(139, 179, 255, 0.24);

  --color-primary: var(--lb-rosa);
  --color-primary-dark: var(--lb-rosa-hover);
  --color-primary-light: var(--lb-rosa-suave);
  --color-secondary: var(--lb-morado);
  --color-secondary-dark: var(--lb-morado-oscuro);
  --color-secondary-light: var(--lb-morado-claro);
  --color-bg: var(--lb-fondo);
  --color-surface: var(--lb-surface);
  --color-border: var(--lb-borde);
  --color-text: var(--lb-texto);
  --color-muted: var(--lb-muted);
  --color-success: var(--lb-exito);
  --color-success-bg: var(--lb-exito-bg);
  --color-warning: var(--lb-warning);
  --color-warning-bg: var(--lb-warning-bg);
  --color-danger: var(--lb-error);
  --color-danger-bg: var(--lb-error-bg);
  --color-info: var(--lb-info);
  --color-info-bg: var(--lb-info-bg);
  --color-neutral: var(--lb-muted);
  --color-neutral-bg: var(--lb-fondo);

  --lb-grad-primary: linear-gradient(135deg, #d9b67a 0%, #b88b3f 100%);
  --lb-grad-rosa: linear-gradient(135deg, #d9b67a 0%, #e5c48d 100%);
  --lb-grad-morado: linear-gradient(135deg, #cfd8e7 0%, #8d96ad 100%);
  --lb-grad-sidebar: linear-gradient(180deg, #0a1128 0%, #060a17 100%);
  --lb-grad-hero: linear-gradient(135deg, rgba(217, 182, 122, 0.24) 0%, rgba(201, 204, 214, 0.08) 100%);
  --lb-grad-card: linear-gradient(135deg, rgba(217, 182, 122, 0.16) 0%, rgba(201, 204, 214, 0.06) 100%);

  --font: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;
  --lb-font: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --lb-font-display: 'Playfair Display', serif;

  --lb-text-xs: 0.70rem;
  --lb-text-sm: 0.8125rem;
  --lb-text-base: 0.9375rem;
  --lb-text-md: 1rem;
  --lb-text-lg: 1.125rem;
  --lb-text-xl: 1.25rem;
  --lb-text-2xl: 1.5rem;
  --lb-text-3xl: 1.875rem;
  --lb-text-4xl: 2.25rem;
  --lb-text-5xl: 3rem;

  --lb-fw-light: 300;
  --lb-fw-normal: 400;
  --lb-fw-medium: 500;
  --lb-fw-semi: 600;
  --lb-fw-bold: 700;
  --lb-fw-xbold: 800;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 3px rgba(6, 10, 23, 0.22);
  --shadow-sm: 0 2px 8px rgba(6, 10, 23, 0.24);
  --shadow: 0 4px 16px rgba(6, 10, 23, 0.28);
  --shadow-md: 0 6px 24px rgba(6, 10, 23, 0.34);
  --shadow-lg: 0 8px 32px rgba(6, 10, 23, 0.40);
  --shadow-rosa: 0 4px 16px rgba(217, 182, 122, 0.24);
  --shadow-btn: 0 4px 14px rgba(217, 182, 122, 0.32);
  --shadow-card: 0 10px 30px rgba(6, 10, 23, 0.28);

  --trans: all 250ms ease;
  --trans-fast: all 150ms ease;
  --trans-slow: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: all 250ms ease;

  --sidebar-width: 260px;
  --topbar-height: 68px;
  --content-max: 1200px;

  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Barras de desplazamiento */
  --scrollbar-size: 10px;
  --scrollbar-track: var(--navy-950);
  --scrollbar-thumb: rgba(217, 182, 122, 0.38);
  --scrollbar-thumb-hover: rgba(217, 182, 122, 0.68);
  --scrollbar-thumb-active: var(--lb-rosa);
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* Chromium, Edge y Safari */
::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  min-width: 36px;
  min-height: 36px;
  border: 2px solid var(--scrollbar-track);
  border-radius: var(--radius-full);
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

/* Contenedores internos: pista integrada con la superficie. */
.sidebar-nav,
.notifications__list,
.choice-grid,
.table-wrap,
.dash-table-wrap,
.agenda-calendar,
.agenda-calendar__body {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.sidebar-nav::-webkit-scrollbar,
.notifications__list::-webkit-scrollbar,
.choice-grid::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.sidebar-nav::-webkit-scrollbar-track,
.notifications__list::-webkit-scrollbar-track,
.choice-grid::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.dash-table-wrap::-webkit-scrollbar-track,
.agenda-calendar::-webkit-scrollbar-track,
.agenda-calendar__body::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb,
.notifications__list::-webkit-scrollbar-thumb,
.choice-grid::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.dash-table-wrap::-webkit-scrollbar-thumb,
.agenda-calendar::-webkit-scrollbar-thumb,
.agenda-calendar__body::-webkit-scrollbar-thumb {
  border-color: transparent;
}