/* ============================================================
   Sistema POS - Sistema de Diseno

   Paleta: "Cafe Industrial"
   Base calida (stone) + acento ambar para acciones primarias.

   Principios de color:
   - Fondo y superficies: escala stone (gris calido con subtono amarillo)
   - Acento primario: ambar (#d97706) — dorado oscuro, no naranja chillante
   - Semanticos: calidos para armonizar con la base stone
     - Exito: esmeralda calido (#059669)
     - Peligro: rojo terracota (#dc2626)
     - Advertencia: ambar claro (#eab308) — distinto del primario
     - Info: azul pizarra (#4f6d7a) — frio desaturado, no electrico
   - Topbar: siempre oscuro (stone-900) en ambos temas para anclaje visual
   - Contraste: todos los textos pasan WCAG AA (4.5:1 normal, 3:1 grande)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800&family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* === Constantes === */
:root {
  /* Primario: ambar dorado oscuro (no naranja) */
  --color-primary: #d97706;
  --color-primary-dark: #b45309;
  --color-primary-light: #f59e0b;
  --color-primary-alpha: rgba(217, 119, 6, 0.12);
  --color-primary-glow: rgba(217, 119, 6, 0.25);

  /* Semanticos — todos con subtono calido */
  --color-success: #059669;
  --color-success-bg: rgba(5, 150, 105, 0.08);
  --color-warning: #eab308;
  --color-warning-bg: rgba(234, 179, 8, 0.08);
  --color-danger: #dc2626;
  --color-danger-bg: rgba(220, 38, 38, 0.08);
  --color-info: #4f6d7a;
  --color-info-bg: rgba(79, 109, 122, 0.08);

  /* Tipografia */
  --font-display: "Outfit", sans-serif;
  --font-family: "DM Sans", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Escala tipografica */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;

  /* Espaciado (escala de 4px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Bordes */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Transiciones */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-theme: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Tactil */
  --touch-min: 44px;
  --touch-comfortable: 48px;

  /* Topbar: siempre stone-900, ancla visual en ambos temas */
  --topbar-bg: #1c1917;
  --topbar-text: #e7e5e4;
}

/* === TEMA CLARO === */
:root,
[data-theme="light"] {
  /* Stone-50 → stone-200 */
  --color-bg: #f5f5f4;
  --color-surface: #ffffff;
  --color-surface-hover: #fafaf9;
  --color-surface-active: #f5f5f4;
  --color-border: #d6d3d1;
  --color-border-light: #e7e5e4;

  /* Stone-900 → stone-400 */
  --color-text: #1c1917;
  --color-text-secondary: #44403c;
  --color-text-muted: #78716c;
  --color-text-light: #a8a29e;

  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-md:
    0 4px 8px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-lg:
    0 8px 24px rgba(28, 25, 23, 0.08), 0 2px 6px rgba(28, 25, 23, 0.04);
  --shadow-xl:
    0 16px 40px rgba(28, 25, 23, 0.1), 0 4px 12px rgba(28, 25, 23, 0.06);
  --shadow-glow: 0 0 20px rgba(217, 119, 6, 0.12);

  --modal-backdrop: rgba(28, 25, 23, 0.5);
  --btn-primary-text: #ffffff;
}

/* === TEMA OSCURO === */
[data-theme="dark"] {
  /* Stone-950 → stone-800 */
  --color-bg: #0c0a09;
  --color-surface: #1c1917;
  --color-surface-hover: #292524;
  --color-surface-active: #44403c;
  --color-border: #44403c;
  --color-border-light: #292524;

  /* Stone-50 → stone-500 */
  --color-text: #fafaf9;
  --color-text-secondary: #d6d3d1;
  --color-text-muted: #a8a29e;
  --color-text-light: #78716c;

  /* Semanticos: mas opacidad en fondo oscuro para legibilidad */
  --color-success-bg: rgba(5, 150, 105, 0.15);
  --color-warning-bg: rgba(234, 179, 8, 0.15);
  --color-danger-bg: rgba(220, 38, 38, 0.15);
  --color-info-bg: rgba(79, 109, 122, 0.2);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 24px rgba(217, 119, 6, 0.2);

  --modal-backdrop: rgba(0, 0, 0, 0.7);
  --btn-primary-text: #ffffff;
}

/* Transicion suave al cambiar tema */
[data-theme] *,
[data-theme] *::before,
[data-theme] *::after {
  transition:
    background-color var(--transition-theme),
    border-color var(--transition-theme),
    color var(--transition-theme),
    box-shadow var(--transition-theme);
}