/* ============================================================
   TOKENS.CSS — Fuente de verdad del diseño
   App Barbería Reto's
   ============================================================
   REGLA: Ningún otro archivo CSS define valores de diseño
   directamente. Todo parte de aquí.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLORES — Escala de grises
  ---------------------------------------------------------- */
  --color-black:        #000000;   /* Negro puro — dark mode bg, elementos puros */
  --color-ink:          #202020;   /* Texto principal en light mode */
  --color-ink-deep:     #060606;   /* Bordes oscuros, iconos fuertes */
  --color-muted:        #B9B9B9;   /* Placeholders, texto secundario */
  --color-border:       #D9D9D9;   /* Bordes suaves, días inactivos */
  --color-surface-dim:  #E5E5E5;   /* Fondos sutiles, elementos desactivados */
  --color-bg:           #F5F5F5;   /* Fondo general de la app */
  --color-white:        #FFFFFF;   /* Cards, paneles, superficies claras */

  /* ----------------------------------------------------------
     COLORES — Semánticos
  ---------------------------------------------------------- */
  --color-success:  #6FE398;            /* Disponible, activo, toggle ON */
  --color-danger:   #E94D4D;            /* Peligro, lleno, cancelar, borrar */
  --color-vacation: #FFE435;            /* Días de vacaciones (solo calendario) */
  --color-waitlist: #EC9E49;            /* Lista de espera — borde, texto */
  --color-waitlist-bg: #F8DFBF;        /* Lista de espera — fondo del badge */
  --color-scrim:    rgba(4, 4, 4, 0.63); /* Overlay oscuro de popups */

  /* ----------------------------------------------------------
     COLORES — Dark mode (admin login y popups oscuros)
  ---------------------------------------------------------- */
  --color-dark-bg:      #000000;   /* Fondo de pantalla en dark mode */
  --color-dark-border:  #545252;   /* Bordes de inputs en dark mode */
  --color-dark-surface: #111111;   /* Superficie elevada en dark mode */

  /* ----------------------------------------------------------
     TIPOGRAFÍA
  ---------------------------------------------------------- */
  --font-family: 'Inter', sans-serif;

  /* Tamaños */
  --font-size-stat:     41px;   /* Cifras grandes de estadísticas y contadores */
  --font-size-title:    29px;   /* Títulos de pantalla: "Iniciar sesión" */
  --font-size-nav:      26px;   /* Ítems de menú: "Inicio", "Reservar" */
  --font-size-price:    24px;   /* Precios, datos de énfasis: "9,00 €" */
  --font-size-item:     21px;   /* Nombres de elemento: "Barbas" */
  --font-size-body:     19px;   /* Botones y cuerpo: "Entrar" */
  --font-size-control:  17px;   /* Inputs y texto de controles */
  --font-size-small:    16px;   /* Texto secundario: "4 de Febrero" */
  --font-size-xs:       13px;   /* Etiquetas mínimas: badges, meta-info */

  /* Pesos */
  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;   /* Títulos principales (ui-title) */

  /* ----------------------------------------------------------
     ESPACIADO — Escala base 8px
  ---------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;

  /* Padding lateral estándar de la app */
  --app-padding-x: 33px;

  /* Separación simétrica título ↔ detalle ↔ botones en popups de confirmación */
  --popup-detail-gap: clamp(28px, 5dvh, 44px);

  /* ----------------------------------------------------------
     RADIOS
  ---------------------------------------------------------- */
  --radius-pill:   999px;   /* Botones, inputs, badges */
  --radius-popup:   24px;   /* Popups y sheets flotantes */
  --radius-card:    20px;   /* Cards y paneles deslizantes */
  --radius-sm:       8px;   /* Elementos menores (chips, tags) */

  /* ----------------------------------------------------------
     CONTROLES — Botones e inputs
  ---------------------------------------------------------- */
  --control-height:   64px;   /* Altura de botones de acción principales */
  --input-height:     50px;   /* Altura de inputs, selects y controles de formulario */
  --control-gap:      12px;   /* Separación entre botones apilados */
  --form-max-width:  332px;   /* Ancho máximo de formularios y botones centrados */

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --app-max-width:       430px;   /* Ancho máximo de la app (iPhone 14 Pro) */
  --logo-collapsed-width: 64px;   /* Logo al reducirse cuando un panel está abierto */

  /* Responsive — tablet / desktop (≥ 768px) */
  --tablet-drawer-width: min(540px, 55vw);   /* Drawer lateral derecho — igual que sheet */
  --tablet-sheet-width:  min(540px, 55vw);   /* Sheets (reservar, citas, etc.) */

  /* ----------------------------------------------------------
     MOVIMIENTO — Transiciones y animaciones
  ---------------------------------------------------------- */
  --motion-fast:  180ms;
  --motion-base:  260ms;
  --motion-slow:  400ms;

  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ----------------------------------------------------------
     STROKE — Grosor de trazo en SVGs
  ---------------------------------------------------------- */
  --stroke-icon:    2;    /* iconos estándar (nav, cerrar, acción, formulario) */
  --stroke-icon-lg: 2.5;  /* iconos decorativos grandes (checkmarks, confirmaciones) */

  /* ----------------------------------------------------------
     SOMBRAS
  ---------------------------------------------------------- */
  --shadow-card:     0 2px 12px rgba(0, 0, 0, 0.08);   /* Cards y paneles */
  --shadow-popup:    0 18px 50px rgba(0, 0, 0, 0.28);  /* Popups y sheets flotantes */
  --shadow-header:   0 4px 20px rgba(0, 0, 0, 0.15);   /* Cabecera fija */
  --shadow-icon:     0 10px 24px rgba(0, 0, 0, 0.16);  /* Botones circulares / avatar */
  --shadow-chip:     0 4px 10px rgba(0, 0, 0, 0.18);   /* Chips y pasos de reserva */
  --shadow-badge:    0 4px 12px rgba(0, 0, 0, 0.20);   /* Badges de notificación */
  --shadow-btn:      0 2px 8px  rgba(0, 0, 0, 0.10);   /* Botones con sombra suave */
  --shadow-control:  0 2px 6px  rgba(0, 0, 0, 0.20);   /* Controles circulares (admin) */
  --shadow-subtle:   0 1px 2px  rgba(0, 0, 0, 0.06);   /* Sombra mínima en items */

  /* ----------------------------------------------------------
     ENCABEZADO DE PANTALLA (header con logo)
  ---------------------------------------------------------- */
  --header-height:   72px;
  --top-anchor:        52px;   /* Separación mínima superior en cualquier pantalla */
  --top-safe-extra:    30px;   /* Margen extra sobre la safe area — home principal */
  --sheet-safe-extra:  30px;   /* Margen extra sobre la safe area — sheets y drawers */

  /* ----------------------------------------------------------
     Z-INDEX — Jerarquía de capas (de menor a mayor)
  ---------------------------------------------------------- */
  --z-base:     1;
  --z-header:  10;
  --z-drawer:  20;
  --z-sheet:   30;
  --z-popup:      1200;
  --z-popup-over: 1250;  /* Popup apilado sobre otro popup */
  --z-scrim:      39;    /* Justo debajo del popup */
  --z-toast:      1300;

}