/* css/variables.css — tokens de diseño de la demo.
   Para cambiar la marca del prospecto basta con ajustar este archivo
   (colores) y js/config.js (nombre y subtítulo). */

:root {
  /* Paleta base */
  --bg: #F7F4EF;
  --surface: #FFFFFF;
  --surface-2: #FBF9F6;
  --surface-sunken: #F1EDE6;
  --ink: #262626;
  --ink-2: #6B6965;
  --ink-3: #8C8984;
  --border: #E6E0D8;
  --border-strong: #D6CEC3;

  --brand: #B85C38;          /* terracota */
  --brand-strong: #914429;   /* terracota oscuro */
  --brand-soft: #F6E7DF;
  --olive: #66715A;
  --amber: #D99A3E;

  /* Sistema de estados: badges y puntos discretos */
  --ok: #3D7A4C;      --ok-bg: #E7F1E8;
  --info: #346A8E;    --info-bg: #E4EEF5;
  --warn: #A9600F;    --warn-bg: #FBEEDA;
  --danger: #B84A43;  --danger-bg: #F8E4E2;
  --muted: #6B6965;   --muted-bg: #EFEBE5;

  /* Tipografía */
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;

  /* Espaciado y forma */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(38, 30, 20, 0.06);
  --shadow-md: 0 4px 16px rgba(38, 30, 20, 0.08);
  --shadow-lg: 0 18px 48px rgba(38, 30, 20, 0.18);
  --focus: 0 0 0 3px rgba(184, 92, 56, 0.35);

  --sidebar-w: 248px;
  --sidebar-compact-w: 76px;
  --topbar-h: 64px;
  --cart-w: 384px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}