/* ---------------------------------------------------------------------------
   Tokens del Terminal POS — Tránsito Vallarta
   Tema oscuro operativo (default) + tema claro alto contraste (toggle).
   --------------------------------------------------------------------------- */

:root {
  /* Form factor del dispositivo simulado (handheld POS). */
  --term-w: 420px;
  --term-h: 860px;
  --term-bezel: 14px;
  --term-radius: 36px;

  /* Tipografía */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Escala tipográfica (compacta, optimizada para 420px) */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 44px;
  --fs-display: 56px;

  /* Pesos */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Espaciado (4px scale) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Touch targets — handheld */
  --tap-min: 44px;
  --tap-md: 56px;
  --tap-lg: 64px;
  --tap-huge: 72px;

  /* Tiempos / curvas */
  --ease-snappy: cubic-bezier(0.2, 0.9, 0.3, 1);
  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 360ms;

  /* Sombras (default oscuras, se sobrescriben en claro) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.5);
  --shadow-frame: 0 32px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

/* ---------------------------------------------------------------------------
   Tema oscuro operativo (default)
   --------------------------------------------------------------------------- */
:root,
[data-theme='dark'] {
  --bg: #0a0f1a;
  --bg-elev: #0f1626;
  --surface: #141b2b;
  --surface-2: #1b2438;
  --border: #1f2a3f;
  --border-strong: #2c3a55;

  --text: #e6ebf5;
  --text-2: #97a0b4;
  --text-muted: #6b7388;
  --text-on-primary: #ffffff;
  --text-on-success: #052013;
  --text-on-warning: #2a1d00;
  --text-on-danger: #ffffff;

  --primary: #1857b8;
  --primary-hover: #1d66d0;
  --primary-fade: rgba(24, 87, 184, 0.16);

  --success: #18a957;
  --success-fade: rgba(24, 169, 87, 0.16);
  --warning: #e0a416;
  --warning-fade: rgba(224, 164, 22, 0.16);
  --danger: #e04438;
  --danger-fade: rgba(224, 68, 56, 0.16);
  --info: #2a7fbf;
  --info-fade: rgba(42, 127, 191, 0.16);

  --device-bezel: #050810;
  --device-bezel-trim: #1b1f2a;
  --status-bar-bg: rgba(8, 12, 22, 0.72);
  --status-icon: #d6dceb;

  /* QR card */
  --qr-bg: #ffffff;
  --qr-fg: #0a0f1a;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   Tema claro de alto contraste (toggle desde Ajustes)
   --------------------------------------------------------------------------- */
[data-theme='light'] {
  --bg: #ffffff;
  --bg-elev: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #eef1f7;
  --border: #d4dae5;
  --border-strong: #a3adc2;

  --text: #0a1428;
  --text-2: #4b576f;
  --text-muted: #6b7388;
  --text-on-primary: #ffffff;
  --text-on-success: #ffffff;
  --text-on-warning: #2a1d00;
  --text-on-danger: #ffffff;

  --primary: #0f3f8e;
  --primary-hover: #0a2f6c;
  --primary-fade: rgba(15, 63, 142, 0.1);

  --success: #117a3e;
  --success-fade: rgba(17, 122, 62, 0.12);
  --warning: #b07900;
  --warning-fade: rgba(176, 121, 0, 0.14);
  --danger: #b62a20;
  --danger-fade: rgba(182, 42, 32, 0.12);
  --info: #185b8a;
  --info-fade: rgba(24, 91, 138, 0.1);

  --device-bezel: #1a2030;
  --device-bezel-trim: #2a3144;
  --status-bar-bg: rgba(255, 255, 255, 0.92);
  --status-icon: #2c3a55;

  --qr-bg: #ffffff;
  --qr-fg: #0a0f1a;

  --shadow-sm: 0 1px 2px rgba(15, 30, 60, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 30, 60, 0.1);
  --shadow-lg: 0 12px 32px rgba(15, 30, 60, 0.14);
  --shadow-frame: 0 32px 80px rgba(15, 30, 60, 0.28);

  color-scheme: light;
}