/* ════════════════════════════════════════════════════════════════════════════
   tokens.css — el vocabulario visual de salon-manager (§5.1 del Plan).
   TODA pantalla nueva sale de acá: si un color o un espaciado no está en este
   archivo, no se usa. Sin frameworks, sin build step: variables CSS puras.

   Modo claro en el MVP. Las variables de dark ya están escritas (abajo, apagadas):
   cuando se prenda, se prende acá y no en 20 pantallas.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Marca ────────────────────────────────────────────────────────────────
     Violeta profundo: se lee bien en pantallas baratas y con reflejo (el celular
     del peluquero al lado de la ventana), y no es "otro SaaS azul". */
  --brand-50: #f2effd;
  --brand-100: #e4defb;
  --brand-200: #c9bdf7;
  --brand-500: #6d5bd0;
  --brand-600: #5b4ac0;
  --brand-700: #4a3aa3;
  --brand-900: #2b2166;

  /* ── Neutros ───────────────────────────────────────────────────────────── */
  --ink-900: #1b1830; /* títulos */
  --ink-700: #3a3552; /* texto */
  --ink-500: #6b6880; /* secundario */
  --ink-300: #a5a2b8; /* deshabilitado / placeholder */
  --line: #e6e3f0; /* bordes */
  --line-fuerte: #d3cfe4;
  --surface: #ffffff; /* cards */
  --surface-2: #faf9fd; /* filas alternas, hovers */
  --bg: #f4f2f9; /* fondo de la app */

  /* ── Semánticos ────────────────────────────────────────────────────────── */
  --ok-500: #12a374;
  --ok-50: #d9f5ea;
  --warn-500: #d98307;
  --warn-50: #fdf0d9;
  --danger-500: #d64545;
  --danger-50: #fde2e2;
  --info-500: #2f7fd8;
  --info-50: #dceafa;

  /* ── Estados de turno (§5.1) — el lenguaje visual central del producto ──
     Un color por estado, IGUAL en la agenda, en la ficha del cliente y en caja.
     Cada uno con su fondo (bloque), su borde (barra izquierda) y su texto. */
  --t-pendiente-bg: var(--warn-50);
  --t-pendiente-line: var(--warn-500);
  --t-pendiente-ink: #7a4a02;

  --t-confirmado-bg: var(--brand-50);
  --t-confirmado-line: var(--brand-500);
  --t-confirmado-ink: var(--brand-900);

  --t-atendido-bg: var(--ok-50);
  --t-atendido-line: var(--ok-500);
  --t-atendido-ink: #08573d;

  --t-no_show-bg: var(--danger-50);
  --t-no_show-line: var(--danger-500);
  --t-no_show-ink: #7e2020;

  --t-cancelado-bg: #eceaf2;
  --t-cancelado-line: var(--ink-300);
  --t-cancelado-ink: var(--ink-500);

  --t-bloqueo-bg: repeating-linear-gradient(
    45deg,
    #eceaf2,
    #eceaf2 6px,
    #e2dfeb 6px,
    #e2dfeb 12px
  );

  /* ── Tipografía ────────────────────────────────────────────────────────────
     Stack del sistema: cero fuentes remotas = cero requests = arranca rápido en
     un Android de gama baja (y funciona sin internet, que en un local pasa). */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --txt-xs: 0.75rem; /* 12px — chips, metadatos */
  --txt-sm: 0.875rem; /* 14px — secundario */
  --txt-base: 1rem; /* 16px — base. NO bajar: menos de 16px en un input hace zoom en iOS */
  --txt-lg: 1.125rem;
  --txt-xl: 1.375rem;
  --txt-2xl: 1.75rem;

  --peso-normal: 400;
  --peso-medio: 550;
  --peso-fuerte: 680;

  /* ── Espaciado (escala de 4) ───────────────────────────────────────────── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* ── Radios y sombras ──────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;

  --sombra-1: 0 1px 2px rgba(27, 24, 48, 0.06), 0 1px 3px rgba(27, 24, 48, 0.05);
  --sombra-2: 0 4px 12px rgba(27, 24, 48, 0.08);
  --sombra-3: 0 -8px 32px rgba(27, 24, 48, 0.16); /* sheets desde abajo */

  /* ── Táctil (§5.1: targets ≥44px) ──────────────────────────────────────── */
  --tap: 44px;
  --tap-lg: 52px;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --sidebar-w: 232px;
  --bottomnav-h: 60px;
  --topbar-h: 56px;
  /* alto de un slot de la grilla de la agenda (§5.2) */
  --slot-h: 30px;
  --col-prof-min: 132px;

  --z-sheet: 50;
  --z-topbar: 30;
  --z-nav: 40;
}

/* Dark mode: PREPARADO, NO ACTIVO (§5.1 — se prende después del MVP).
   Está acá para que ninguna pantalla hardcodee un color: el día que se prenda,
   se cambia este bloque a `@media (prefers-color-scheme: dark)` y listo. */
:root[data-tema='oscuro'] {
  --ink-900: #f3f1fa;
  --ink-700: #d8d4e6;
  --ink-500: #9d99b3;
  --ink-300: #6a6680;
  --line: #322d4a;
  --line-fuerte: #423c5f;
  --surface: #211d35;
  --surface-2: #1a1729;
  --bg: #141122;
}