/* ════════════════════════════════════════════════════════════════════════════
   tokens.css — el vocabulario visual de bordado-manager (Plan §6; heredado de salon).
   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.

   DIRECCIÓN "STUDIO" de salon, con el acento cambiado (2026-10-23): ciruela, el violeta de la
   flor pasionaria y de un hilo de bordar, en lugar del terracota de la peluquería.
   · Papel cálido y superficies claras; navegación lateral en tinta oscura.
   · Ciruela para ACTUAR (botón primario, foco), salvia para lo
     que salió bien. El acento sigue usándose con avaricia.
   · Inter local para operar; Georgia del sistema para los títulos editoriales.
   · Tarjetas de importes DISCRETAS: claras, bajas, con borde suave de su tono
     (salvia = entra plata, ciruela = sale). Nada de números gigantes ni negros.
   El color se reserva para lo que IMPORTA: el estado de un presupuesto y la plata.

   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.
   ════════════════════════════════════════════════════════════════════════════ */

/* Inter variable, vendoreada (public/fonts/): un archivo cubre 400–700.
   Sin CDN: cero requests a terceros y el SW la cachea (ver public/fonts/LEEME.txt). */
@font-face {
  font-family: 'Inter';
  src: url('/public/fonts/inter.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Marca: ciruela ────────────────────────────────────────────────────────
     El hilo violeta y la flor pasionaria. Es el color de ACTUAR. Contraste con texto
     blanco: 6,9:1 (el terracota de salon daba 4,8:1). */
  --brand-50: #f5ebf2;
  --brand-100: #e9d3e3;
  --brand-200: #d3abc7;
  --brand-500: #8e3b74;
  --brand-600: #7a3063;
  --brand-700: #652753;
  --brand-900: #3a1530;

  /* ── Neutros cálidos: papel y tinta verdosa ─────────────────────────────── */
  --ink-900: #292c27; /* títulos */
  --ink-700: #454b42; /* texto */
  --ink-500: #63675d; /* secundario (≥4,5:1 incluso sobre --surface-2) */
  --ink-300: #a3a79b; /* deshabilitado / decorativo */
  --line: #e3e4da; /* bordes */
  --line-fuerte: #d2d6c9;
  --surface: #fffefb; /* paneles */
  --surface-2: #f0efe8; /* filas, hovers, fondos de apoyo */
  --bg: #f5f4ee; /* papel: el fondo de la app */

  /* ── Navegación lateral (tinta) ──────────────────────────────────────────
     Aprobada con Studio: la objeción al negro era sobre las TARJETAS de importes,
     no sobre la barra. */
  --nav-bg: #292c27;
  --nav-ink: #cdd3c4;
  --nav-ink-fuerte: #fbfbf4;
  --nav-sub: #b0b7a6;
  --nav-hover: #393d32;
  --nav-linea: #45483e;
  --nav-activo-bg: #e9ecd9;
  --nav-activo-ink: #2f3929;
  --nav-monograma: #42463b;
  --marca-hilo: #d7a9c9; /* el bastidor de la marca, sobre la tinta */

  /* ── Semánticos, del mismo mundo cálido ─────────────────────────────────── */
  --ok-500: #466552; /* salvia: salió bien */
  --ok-50: #e7eee6;
  --warn-500: #a8741f;
  --warn-50: #f8ead2;
  --danger-500: #b3432d;
  --danger-50: #f7e2db;
  --danger-ink: #7a2a1a;
  --info-500: #4a6f8a;
  --info-50: #e6eef3;
  --info-ink: #2c4a5c;

  /* ── Tarjetas de resumen (Caja, Gastos, Reportes) ─────────────────────────
     La corrección aprobada del mockup: claras y bajas. El tono va en el BORDE; solo
     la destacada se rellena. Salvia = ingresos / efectivo / resultado positivo.
     Ciruela = salidas, costos. */
  --summary-sage: #6a7b5b;
  --summary-sage-line: #b1bda6;
  --summary-clay: var(--brand-500);
  --summary-clay-line: #d6aecb;

  /* ── 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.
     La superficie del bloque es casi papel: el color VIVE EN LA BARRA de la
     izquierda. Con el día lleno la grilla se sigue leyendo.

     DOS REGLAS que se ganaron a los golpes:
     1. Los estados tienen que distinguirse ENTRE SÍ de un vistazo (y además llevan
        texto: el color nunca es la única señal).
     2. Ningún estado usa el ciruela de MARCA. El acento es de la app. */
  --t-pendiente-bg: #fdf8ec;
  --t-pendiente-line: #c08a2e;
  --t-pendiente-ink: #6d4c10;

  --t-confirmado-bg: #f0f4f6;
  --t-confirmado-line: #4a6f8a;
  --t-confirmado-ink: #2c4a5c;

  /* atendido = "por cobrar": salvia profunda, todavía con plata pendiente */
  --t-atendido-bg: #edf3f0;
  --t-atendido-line: #2f5d50;
  --t-atendido-ink: #1e4238;

  /* El pago es una segunda dimensión: el turno cobrado se resuelve de un vistazo. */
  --t-cobrado-bg: #edf2e9;
  --t-cobrado-line: #5e7850;
  --t-cobrado-ink: #3f5636;

  --t-no_show-bg: #fbeee9;
  --t-no_show-line: #b3432d;
  --t-no_show-ink: #7a2a1a;

  --t-cancelado-bg: #f2f1ea;
  --t-cancelado-line: #a3a79b;
  --t-cancelado-ink: #5c6056;

  --t-bloqueo-bg: repeating-linear-gradient(
    45deg,
    #efeee6,
    #efeee6 5px,
    #e6e6dc 5px,
    #e6e6dc 10px
  );

  /* Tonos de avatar de profesionales/clientes: se asignan por posición, no significan nada. */
  --tono-salvia-bg: #e4e6d9;
  --tono-salvia-ink: #4d5843;
  --tono-rosa-bg: #f1e0d9;
  --tono-rosa-ink: #875844;
  --tono-azul-bg: #e2e9ed;
  --tono-azul-ink: #4e6773;
  --tono-lila-bg: #ebe4ef;
  --tono-lila-ink: #6a5c76;

  /* ── Tipografía ────────────────────────────────────────────────────────────
     Inter vendoreada + el stack del sistema como red. Georgia (del SISTEMA, sin
     descargar nada) para los títulos editoriales: le da voz de salón sin costo.
     Ningún texto de lectura baja de 12px: la tablet del mostrador tiene reflejos. */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --txt-2xs: 0.6875rem; /* 11px — eyebrows en versalita, con tracking */
  --txt-xs: 0.75rem; /* 12px — metadatos */
  --txt-sm: 0.8125rem; /* 13px — secundario */
  --txt-base: 0.9375rem; /* 15px — base de la UI */
  --txt-lg: 1.0625rem; /* 17px */
  --txt-xl: 1.25rem; /* 20px */
  --txt-2xl: 1.625rem; /* 26px — el importe que importa (22–26 según el ancho) */
  --txt-display: clamp(1.875rem, 1.3rem + 1.6vw, 2.5rem); /* 30–40px — el título editorial */

  /* OJO: los INPUTS no bajan de 16px aunque la escala baje (components.css).
     Menos de 16px en un input hace que iOS zoomee al tocarlo. */
  --txt-input: 1rem;

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 600;

  --track-titulo: -0.02em;
  --track-display: -0.03em;
  --track-versalita: 0.12em;

  /* ── 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 ──────────────────────────────────────────────────────
     Bordes delicados y sombra CERO en los paneles: la estructura la hacen los bordes.
     La sombra queda para lo que de verdad flota (panel lateral, toast). */
  --r-sm: 5px;
  --r-md: 8px;
  --r-tile: 10px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;

  --sombra-1: none;
  --sombra-2: 0 6px 20px rgba(41, 44, 39, 0.16);
  --sombra-3: -16px 0 60px rgba(23, 29, 32, 0.14);
  --fondo-modal: rgba(32, 35, 30, 0.42);

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

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --sidebar-w: 222px;
  --bottomnav-h: 64px;
  --topbar-h: 64px;
  --sheet-w: 480px;

  /* La agenda (§5.2). 44px por slot: el bloque de un turno lleva hora, nombre, servicio
     y estado sin cortarse. La grilla scrollea ADENTRO de su panel, así la cabecera de
     profesionales queda pegada arriba y el documento nunca se desborda. */
  --slot-h: 44px;
  --col-hora-w: 56px;
  --col-prof-min: 120px; /* 56 + 6 × 120 = 776: seis profesionales entran en una PC de 1440 */
  --agenda-cab-h: 60px;
  /* La agenda única (0012): cada carril de turnos simultáneos, y la franja libre de la derecha
     (44px = el target táctil mínimo: es donde se toca para encimar un turno). */
  --carril-min: 112px;
  --carril-libre-w: 44px;

  --z-sheet: 50;
  --z-toast: 60;
  --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: #f4f3ec;
  --ink-700: #d9dccf;
  --ink-500: #a7ab9e;
  --ink-300: #6f7368;
  --line: #3a3d35;
  --line-fuerte: #4a4d44;
  --surface: #23251f;
  --surface-2: #1c1e19;
  --bg: #161814;
}