/* =====================================================
   PLANY · TOKENS DE MARCA
   Fuente: Brand Book v1.3 + Sistema Completo del Logo
   ===================================================== */

:root {
  /* ---- Color · marca ---- */
  --naranja: #FF6B35;
  --naranja-700: #B84621;
  --magenta: #E91E63;        /* canónico Design System v2 */
  --magenta-deep: #C2185B;   /* tono más profundo para hover/acento */
  --amarillo: #FFD23F;
  --crema: #FFF5EC;
  --crema-2: #FDF4EE;
  --lino: #F5F1ED;
  --carbon: #1A1A2E;

  /* ---- Color · oscuro (Home / chat de Nia) ---- */
  --dark-bg: #15151f;
  --dark-surface: #1f1f2e;
  --dark-surface-2: #2a2a3d;
  --dark-line: rgba(255,255,255,0.08);
  --dark-text: #FFF5EC;
  --dark-muted: rgba(255,245,236,0.62);

  /* ---- Color · grises (sobre claro) ---- */
  --gray-50: #FAFAF7;
  --gray-100: #F2F0EE;
  --gray-200: #E5E2DE;
  --gray-300: #D9D5D0;
  --gray-500: #6F6B65;
  --gray-600: #595550;
  --gray-700: #3F3B36;

  /* ---- Estado ---- */
  --verde: #22A06B;
  --verde-bg: #DCF2E6;
  --whatsapp: #075E54;
  --whatsapp-bubble: #DCF8C6;
  --whatsapp-bg: #ECE5DD;

  /* ---- Gradientes (solo fondos / Nia / vacíos) ---- */
  --grad-marca: linear-gradient(135deg, var(--naranja), var(--magenta));
  --grad-calido: linear-gradient(135deg, #FF8A4C 0%, var(--naranja) 45%, var(--magenta) 100%);
  --grad-noche: linear-gradient(160deg, #2a2a3d 0%, #15151f 100%);

  /* ---- Tipografía ---- */
  --font-display: 'Cabinet Grotesk', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* ---- Radios ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Sombras ---- */
  --sh-sm: 0 2px 8px rgba(26,26,46,0.06);
  --sh-md: 0 8px 24px -8px rgba(26,26,46,0.12);
  --sh-lg: 0 18px 40px -12px rgba(26,26,46,0.22);
  --sh-cta: 0 10px 26px -8px rgba(255,107,53,0.55);

  /* ---- Layout ---- */
  --screen-w: 390px;     /* ancho lógico mobile (iPhone) */
  --screen-h: 844px;
  --nav-h: 76px;         /* alto de la bottom-nav */
}
