/* ==========================================================
   Cita Express - Tokens de Diseño y Variables CSS
   Paleta: Colores Cálidos, Arena, Terracota & Ámbar Minimalista
   ========================================================== */

:root {
  /* Tipografía */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  /* Paleta Cálida Primaria */
  --primary-50: #FFF5F2;
  --primary-100: #FFE6E0;
  --primary-200: #FFCCC2;
  --primary-300: #FFA899;
  --primary-400: #F47C62;
  --primary-500: #E05D40;       /* Terracota vibrante principal */
  --primary-600: #C9492D;
  --primary-700: #A8361E;
  --primary-800: #882B17;
  --primary-900: #6B2314;

  /* Tonos Ámbar y Sol Radiante */
  --amber-50: #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-600: #D97706;

  /* Neutros Cálidos (Arena, Pergamino, Carbón Cálido) */
  --sand-50: #FAF8F5;          /* Fondo principal ultra cálido y luminoso */
  --sand-100: #F4EFEB;
  --sand-200: #EAE2DB;
  --sand-300: #D7CBC1;
  --sand-400: #B3A092;
  --sand-500: #8C786A;
  --sand-700: #524339;
  --sand-800: #362B24;
  --sand-900: #1F1712;         /* Texto principal de alto contraste */

  /* Estados y Semántica */
  --success-light: #ECFDF5;
  --success: #10B981;
  --error-light: #FEF2F2;
  --error: #EF4444;
  --warning-light: #FFFBEB;
  --warning: #F59E0B;
  --info-light: #EFF6FF;
  --info: #3B82F6;

  /* Gradientes Cálidos Premium */
  --grad-warm-hero: linear-gradient(135deg, #FF7A59 0%, #E05D40 50%, #C9492D 100%);
  --grad-amber-glow: linear-gradient(135deg, #FFA07A 0%, #FF6F61 100%);
  --grad-surface: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(253, 248, 245, 0.90) 100%);
  --grad-bg: radial-gradient(circle at 10% 20%, rgba(255, 237, 230, 0.75) 0%, rgba(250, 248, 245, 1) 90%);

  /* Sombras y Elevaciones Cálidas */
  --shadow-sm: 0 2px 8px rgba(136, 43, 23, 0.04);
  --shadow-md: 0 8px 24px rgba(136, 43, 23, 0.07);
  --shadow-lg: 0 16px 36px rgba(136, 43, 23, 0.09);
  --shadow-xl: 0 24px 50px rgba(136, 43, 23, 0.12);
  --shadow-input-focus: 0 0 0 4px rgba(224, 93, 64, 0.15);

  /* Bordes y Esquinas */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* Transiciones */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --trans-fast: 0.15s ease;
  --trans-normal: 0.25s var(--ease-spring);
  --trans-smooth: 0.4s var(--ease-spring);
}