/**
 * css/base.css
 * Tacos POST — SaaS multi-tenant POS
 *
 * Contenido:
 *   1. Reset y box model
 *   2. Variables globales (tokens de diseño)
 *   3. Tipografía base
 *   4. Scroll y selección de texto
 *   5. Utilidades de accesibilidad
 */

/* ─────────────────────────────────────────────
   1. RESET Y BOX MODEL
   ───────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Previene zoom en inputs en iOS */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Scroll suave global */
  scroll-behavior: smooth;
  /* Renderizado de fuentes */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* ─────────────────────────────────────────────
   2. VARIABLES GLOBALES — TOKENS DE DISEÑO
   ───────────────────────────────────────────── */

:root {

  /* ── Paleta de colores ─────────────────────── */

  /* Primarios */
  --color-primario:      #E63946;   /* rojo taquería */
  --color-primario-dark: #C1121F;
  --color-primario-rgb:  230, 57, 70;

  --color-secundario:    #F4A261;   /* naranja cálido */
  --color-secundario-dark: #E07D3C;

  /* Estatus de pedidos */
  --color-pendiente:     #F4A261;   /* naranja */
  --color-preparando:    #457B9D;   /* azul acero */
  --color-terminado:     #2DC653;   /* verde */

  /* Semánticos */
  --color-error:         #E63946;
  --color-warning:       #F4A261;
  --color-success:       #2DC653;
  --color-info:          #457B9D;

  /* ── Escalas de grises neutras ─────────────── */
  --gris-50:   #F8F9FA;
  --gris-100:  #F1F3F5;
  --gris-200:  #E9ECEF;
  --gris-300:  #DEE2E6;
  --gris-400:  #CED4DA;
  --gris-500:  #ADB5BD;
  --gris-600:  #6C757D;
  --gris-700:  #495057;
  --gris-800:  #343A40;
  --gris-900:  #212529;

  /* Oscuros para tema cocina */
  --dark-900: #0D0D1A;
  --dark-800: #12121F;
  --dark-700: #1A1A2E;
  --dark-600: #16213E;
  --dark-500: #1F2D4A;

  /* ── Tipografía ────────────────────────────── */

  /*
   * Display: Syne — geométrica, fuerte, pensada para títulos
   *           y números grandes en el kanban de cocina.
   * Body:    DM Sans — neutral, muy legible en pantallas de
   *           bajo contraste y condiciones de cocina.
   * Mono:    JetBrains Mono — precios, IDs, datos técnicos.
   */
  --fuente-display: 'Syne',       sans-serif;
  --fuente-base:    'DM Sans',    sans-serif;
  --fuente-mono:    'JetBrains Mono', monospace;

  /* Escala tipográfica (Major Third — 1.25) */
  --text-xs:   0.64rem;   /*  ~10px */
  --text-sm:   0.8rem;    /*  ~13px */
  --text-base: 1rem;      /*   16px */
  --text-lg:   1.25rem;   /*   20px */
  --text-xl:   1.563rem;  /*   25px */
  --text-2xl:  1.953rem;  /*   31px */
  --text-3xl:  2.441rem;  /*   39px */
  --text-4xl:  3.052rem;  /*   49px */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    800;

  --line-height-tight:  1.2;
  --line-height-snug:   1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed:1.7;

  --letter-spacing-tight: -0.03em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.04em;
  --letter-spacing-wider:  0.08em;
  --letter-spacing-widest: 0.15em;

  /* ── Espaciado ─────────────────────────────── */
  --espacio-1:  0.25rem;   /*  4px */
  --espacio-2:  0.5rem;    /*  8px */
  --espacio-3:  0.75rem;   /* 12px */
  --espacio-4:  1rem;      /* 16px */
  --espacio-5:  1.25rem;   /* 20px */
  --espacio-6:  1.5rem;    /* 24px */
  --espacio-8:  2rem;      /* 32px */
  --espacio-10: 2.5rem;    /* 40px */
  --espacio-12: 3rem;      /* 48px */
  --espacio-16: 4rem;      /* 64px */

  /* ── Radios de borde ──────────────────────── */
  --radio-sm:    6px;
  --radio-card:  12px;
  --radio-lg:    16px;
  --radio-xl:    24px;
  --radio-pill:  999px;

  /* ── Sombras ───────────────────────────────── */
  --sombra-xs:   0 1px 2px rgba(0,0,0,0.06);
  --sombra-sm:   0 1px 4px rgba(0,0,0,0.08);
  --sombra-card: 0 2px 8px rgba(0,0,0,0.10);
  --sombra-md:   0 4px 16px rgba(0,0,0,0.12);
  --sombra-lg:   0 8px 32px rgba(0,0,0,0.16);
  --sombra-xl:   0 16px 48px rgba(0,0,0,0.20);

  /* Sombra con color primario (para botones activos) */
  --sombra-primario: 0 4px 20px rgba(var(--color-primario-rgb), 0.35);

  /* ── Transiciones ──────────────────────────── */
  --transition-fast:   100ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   350ms ease;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index ───────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-modal:   300;
  --z-toast:   400;
  --z-tooltip: 500;

  /* ── Layout ────────────────────────────────── */
  --max-width-sm:  480px;
  --max-width-md:  768px;
  --max-width-lg:  1024px;
  --max-width-xl:  1280px;

  /* Ancho de columna en el kanban */
  --kanban-col-min: 300px;
  --kanban-col-max: 380px;
}

/* ─────────────────────────────────────────────
   3. TIPOGRAFÍA BASE
   ───────────────────────────────────────────── */

/*
 * Las fuentes se cargan desde Google Fonts.
 * Incluir en el <head> de cada HTML:
 *
 * <link rel="preconnect" href="https://fonts.googleapis.com">
 * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 * <link href="https://fonts.googleapis.com/css2?
 *   family=Syne:wght@600;700;800&
 *   family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;
 *   0,9..40,600;1,9..40,400&
 *   family=JetBrains+Mono:wght@400;500&
 *   display=swap" rel="stylesheet">
 */

body {
  font-family: var(--fuente-base);
  font-size:   var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family:    var(--fuente-display);
  font-weight:    var(--font-weight-bold);
  line-height:    var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm);  }

p {
  line-height: var(--line-height-relaxed);
}

small {
  font-size: var(--text-sm);
}

code,
pre,
kbd {
  font-family: var(--fuente-mono);
  font-size:   0.9em;
}

/* Números con estilo tabular (alineación en tablas y precios) */
.num,
[data-tipo="precio"],
[data-tipo="numero"] {
  font-family:          var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing:       -0.01em;
}

/* ─────────────────────────────────────────────
   4. SCROLL Y SELECCIÓN
   ───────────────────────────────────────────── */

/* Scrollbar personalizada (Chromium) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background:    var(--gris-400);
  border-radius: var(--radio-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gris-500);
}

/* Selección de texto */
::selection {
  background: rgba(var(--color-primario-rgb), 0.20);
  color:      inherit;
}

/* ─────────────────────────────────────────────
   5. UTILIDADES DE ACCESIBILIDAD
   ───────────────────────────────────────────── */

/* Visualmente oculto pero accesible para lectores de pantalla */
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

/* Focus visible solo con teclado */
:focus-visible {
  outline:        2px solid var(--color-primario);
  outline-offset: 3px;
  border-radius:  var(--radio-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Reducir movimiento para usuarios con preferencia */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto !important;
  }
}