/* ============================================================
   VORTIZE — Design tokens v1.0 (Junio 2026)
   Fuente de verdad: identidad/03-identidad-visual.md
   Uso: web + SaaS. El frontend consume variables, nunca hex sueltos.
   ============================================================ */

:root {
  /* ---- Núcleo de marca ---- */
  --vz-cornsilk:     #fefae0;  /* fondo principal light */
  --vz-forest:       #283618;  /* texto principal / fondo oscuro */
  --vz-olive:        #606c38;  /* primario de marca */
  --vz-clay:         #dda15e;  /* acento cálido (decorativo en claro, texto solo en oscuro) */
  --vz-copper:       #bc6c25;  /* acento fuerte (texto grande / UI, nunca body) */

  /* ---- Rampa olive (primario) ---- */
  --vz-olive-50:  #f5f7ee;
  --vz-olive-100: #e7ecd8;
  --vz-olive-200: #d0d9b4;
  --vz-olive-300: #b3c089;
  --vz-olive-400: #97a763;
  --vz-olive-500: #7d8c47;
  --vz-olive-600: #606c38;   /* = Olive Leaf */
  --vz-olive-700: #4b5530;
  --vz-olive-800: #3d4529;
  --vz-olive-900: #2f3a20;

  /* ---- Rampa tierra cálida (clay + copper, una sola familia) ---- */
  --vz-copper-50:  #fdf6ee;
  --vz-copper-100: #f9e9d3;
  --vz-copper-200: #f2d3a6;
  --vz-copper-300: #e9b97c;
  --vz-copper-400: #dda15e;  /* = Sunlit Clay */
  --vz-copper-500: #d18a3e;
  --vz-copper-600: #bc6c25;  /* = Copperwood */
  --vz-copper-700: #9a541d;  /* tono cobre apto para texto sobre claro */
  --vz-copper-800: #7c4419;
  --vz-copper-900: #653917;

  /* ---- Neutros cálidos (sand) — nunca grises fríos ---- */
  --vz-sand-0:   #fffef7;   /* superficie elevada */
  --vz-sand-50:  #fefae0;   /* = Cornsilk */
  --vz-sand-100: #f7f2d8;
  --vz-sand-200: #ece6c6;
  --vz-sand-300: #ddd6b2;   /* bordes, grillas data-viz */
  --vz-sand-500: #a8a487;   /* texto deshabilitado */
  --vz-sand-700: #5c6650;   /* texto secundario */

  /* ---- Semánticos (light mode) ---- */
  --vz-bg:           var(--vz-sand-50);
  --vz-surface:      var(--vz-sand-0);
  --vz-border:       var(--vz-sand-300);
  --vz-text:         var(--vz-forest);
  --vz-text-muted:   var(--vz-sand-700);
  --vz-primary:      var(--vz-olive-600);
  --vz-primary-hover:var(--vz-olive-700);
  --vz-on-primary:   var(--vz-cornsilk);
  --vz-accent:       var(--vz-copper-600);
  --vz-link:         var(--vz-olive-700);

  /* ---- Funcionales ---- */
  --vz-success: #3f7d3a;
  --vz-warning: #d18a3e;
  --vz-error:   #b3402a;
  --vz-info:    #46695f;

  /* ---- Tipografía ----
     Display: pendiente decisión final (Jost recomendada; ver brand-book.html) */
  --vz-font-display: 'Jost', 'Poppins', 'Century Gothic', sans-serif;
  --vz-font-body:    'Inter', system-ui, sans-serif;

  /* ---- Radios y sombras (precisión geométrica, sombras suaves) ---- */
  --vz-radius-sm: 6px;
  --vz-radius-md: 10px;
  --vz-radius-lg: 16px;
  --vz-shadow-sm: 0 1px 2px rgba(40, 54, 24, 0.06);
  --vz-shadow-md: 0 4px 16px rgba(40, 54, 24, 0.10);
}

/* ---- Modo oscuro ---- */
[data-theme="dark"] {
  --vz-bg:           #1d2913;
  --vz-surface:      #283618;
  --vz-border:       #3d4529;
  --vz-text:         var(--vz-cornsilk);
  --vz-text-muted:   #b8bda0;
  --vz-primary:      var(--vz-olive-400);
  --vz-primary-hover:var(--vz-olive-300);
  --vz-on-primary:   #1d2913;
  --vz-accent:       var(--vz-copper-400); /* Clay brilla sobre oscuro */
  --vz-link:         var(--vz-copper-300);
}