/*
  tokens.css — Design tokens compartidos entre landing y dashboards
  Fuente de verdad para colores, tipografía, bordes y estados semánticos.
*/

:root {
  /* ── Color base ── */
  --bg:         #f0ebe3;   /* fondo general — crema cálido */
  --bg2:        #e6ddd2;   /* superficies secundarias / KPI blocks */
  --bg3:        #dcd0c5;   /* hover / acento de fondo */
  --surface:    #fff;      /* cards, inputs */
  --border:     rgba(0,0,0,0.12);

  /* ── Texto ── */
  --text:       #1a1a18;   /* primario */
  --text-sec:   #5f5e5a;   /* secundario — subtítulos, labels */
  --text-muted: #767672;   /* terciario — mínimo WCAG AA sobre blanco */

  /* ── Acción primaria (rose) ── */
  --accent:        #D4537E;
  --accent-hover:  #c0456f;
  --accent-dim:    rgba(212,83,126,0.08);
  --accent-border: rgba(212,83,126,0.25);
  --accent-dark:   #9B2C4E;  /* texto sobre fondo rose claro */
  --accent-bg:     #FDE8F0;  /* fondo de badge rose */

  /* ── Estados semánticos ── */
  --success-bg:   #E1F5EE;
  --success-text: #085041;
  --warning-bg:   #FEF3CD;
  --warning-text: #7A5A00;
  --danger-bg:    #FCEBEB;
  --danger-text:  #791F1F;
  --neutral-bg:   #F3F3F3;
  --neutral-text: #767672;

  /* ── Bordes ── */
  --radius:     12px;   /* cards, inputs, badges */
  --radius-lg:  16px;   /* componentes grandes — mockup, secciones */
  --radius-xl:  24px;   /* secciones full-bleed */
  --radius-pill: 100px; /* CTAs principales, chips */

  /* ── Tipografía ──
     Google Fonts a cargar en cada HTML:
     Inter (UI/body): https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700
     Fraunces (display/títulos): https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,400;0,700;1,300;1,400
  */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono:    ui-monospace, 'SF Mono', monospace;

  /* ── Sombras ── */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:  0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 6px 24px rgba(0,0,0,0.10);

  /* ── Focus ── */
  --focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--accent);
}