/*
  PWA DDI — design tokens.
  Misma familia de marca que el panel de integrador (rojo/blanco cálido,
  skill panel-visual.md) — mismos valores hex, para que ambas apps se
  sientan del mismo producto. La estructura debajo de esos colores es
  nueva: esta es una app de una sola mano, en un teléfono, en un momento
  de estrés — prioriza objetivos táctiles grandes y una jerarquía muy
  simple sobre la densidad de información que sí tiene el panel.
*/

:root {
  color-scheme: dark;

  /* Color — base (idéntico al panel, misma marca) */
  --color-bg: #170D0D;
  --color-bg-elevated: #241414;
  --color-primary: #2A1616;
  --color-primary-foreground: #FFFFFF;
  --color-secondary: #331A1A;
  --color-secondary-foreground: #FFFFFF;
  --color-foreground: #FAF3F1;
  --color-muted: #241414;
  --color-muted-foreground: #B99C97;
  --color-border: #3A2323;
  --color-ring: #D97066;

  --color-red: #B54339;
  --color-red-light: #D97066;
  --color-steel: #8C7B76;

  --color-accent: var(--color-red);
  --color-accent-foreground: #FFFFFF;
  --color-success: #3FA06B;
  --color-success-foreground: #06210F;
  --color-warning: #D9A441;
  --color-warning-foreground: #241900;
  --color-destructive: #7A3030;
  --color-destructive-foreground: #FFFFFF;

  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-strong: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: 18px;
  --glass-saturate: 115%;
  --glass-shadow: 0 8px 28px rgba(10, 2, 2, 0.5);

  /* Type — un punto más grande de base que el panel: se lee de lejos, en
     movimiento, no sentado frente a un monitor. */
  --font-ui: 'Work Sans', system-ui, sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 200ms;

  --z-header: 10;
  --z-banner: 15;
  --z-bottom-nav: 20;
  --z-toast: 40;
  --z-dialog: 50;

  /*
    Objetivo táctil mínimo (WCAG 2.5.5 / guía de Apple, 44pt): esta app se
    usa bajo estrés, con dedos temblorosos o desde el bolsillo — nunca un
    objetivo interactivo por debajo de esto, a diferencia del panel donde
    un mouse permite precisión mayor.
  */
  --touch-target-min: 44px;

  --bottom-nav-height: 64px;

  /*
    Recorte seguro de iOS en modo standalone (notch, home indicator) —
    doc 09 §13. En Android estas variables resuelven a 0, no hacen daño.
  */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}