/*
  ChatMenu — Design tokens
  Identidad propia: base cálida tipo "papel de cocina" en claro, carbón
  premium en oscuro; acento "chile" (naranja-rojo) para marca/acciones,
  y verde "albahaca" reservado para precios y estados positivos.
  No es un clon de WhatsApp/Uber/Rappi — toma prestado el *patrón* de
  burbujas conversacionales, no su paleta.
*/

:root {
  /* ---- Marca ---- */
  --brand-chile-500: #ff5a36;
  --brand-chile-600: #e8461f;
  --brand-chile-700: #c73412;
  --brand-basil-500: #1f9d55;
  --brand-basil-600: #17803f;
  --brand-mango-500: #ffb648;

  /* ---- Superficies (modo claro) ---- */
  --color-bg: #fbf6ee;
  --color-surface: #ffffff;
  --color-surface-2: #f3ece0;
  --color-border: #e8dfd0;
  --color-text: #241c14;
  --color-text-muted: #7a6f5f;
  --color-text-inverse: #fffaf3;

  /* ---- Semántico ---- */
  --color-primary: var(--brand-chile-500);
  /* chile-600 (3.9:1) todavía no llega a AA para texto — chile-700 (5.15:1
     sobre crema) sí. Antes definida pero sin ningún consumidor en el CSS;
     ahora la usan .cm-btn--primary y el link de privacidad (ver forms.css). */
  --color-primary-strong: var(--brand-chile-700);
  /* chile-500/basil-500 son para superficies grandes (fondos, gradientes,
     iconos) — como texto sobre blanco/crema no llegan a 4.5:1 (WCAG AA).
     --color-success se usa exclusivamente como color de texto (precios,
     totales) en todo el proyecto, así que aquí sí se sube a basil-600
     (5:1) directamente en el token. Ver auditoría UX Fase 4. */
  --color-success: var(--brand-basil-600);
  --color-success-strong: var(--brand-basil-600);
  --color-danger: #e0393f;
  --color-warning: var(--brand-mango-500);
  --color-info: #2f7fd6;

  /* ---- Burbujas tipo chat (solo estética, no mensajería real) ---- */
  --bubble-bot-bg: var(--color-surface);
  --bubble-bot-text: var(--color-text);
  --bubble-user-bg: var(--brand-chile-500);
  --bubble-user-text: #fffaf3;

  /* ---- Tipografía ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;

  /* ---- Espaciado (escala 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;

  /* ---- Radios ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Sombras ---- */
  --shadow-sm: 0 1px 2px rgba(36, 28, 20, 0.06), 0 1px 1px rgba(36, 28, 20, 0.04);
  --shadow-md: 0 4px 14px rgba(36, 28, 20, 0.10);
  --shadow-lg: 0 12px 32px rgba(36, 28, 20, 0.16);
  --shadow-float: 0 8px 20px rgba(255, 90, 54, 0.28);

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;

  /* ---- Estructura app ---- */
  --bottom-nav-height: 64px;
  --header-height: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- z-index ---- */
  --z-header: 100;
  --z-bottom-nav: 100;
  --z-modal: 300;
  --z-toast: 400;
}

/* ---- Modo oscuro: carbón premium, mismo acento ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #16130f;
    --color-surface: #211c16;
    --color-surface-2: #2a231b;
    --color-border: #3a3125;
    --color-text: #f5efe4;
    --color-text-muted: #b3a693;
    --color-text-inverse: #1a1510;

    --bubble-bot-bg: var(--color-surface);
    --bubble-bot-text: var(--color-text);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  --color-bg: #16130f;
  --color-surface: #211c16;
  --color-surface-2: #2a231b;
  --color-border: #3a3125;
  --color-text: #f5efe4;
  --color-text-muted: #b3a693;
  --color-text-inverse: #1a1510;
  --bubble-bot-bg: var(--color-surface);
  --bubble-bot-text: var(--color-text);
}

:root[data-theme="light"] {
  --color-bg: #fbf6ee;
  --color-surface: #ffffff;
  --color-surface-2: #f3ece0;
  --color-border: #e8dfd0;
  --color-text: #241c14;
  --color-text-muted: #7a6f5f;
  --color-text-inverse: #fffaf3;
  --bubble-bot-bg: var(--color-surface);
  --bubble-bot-text: var(--color-text);
}