/* ============================================================
   D8P500 DESIGN SYSTEM v2 — "CARAMELO" — TOKENS
   https://design.d8p500.com/v2/tokens.css

   Contrato: MISMOS NOMBRES que v1, valores nuevos. Una app migra
   cambiando sus dos <link> a /v2/ — y vuelve atrás igual de fácil.
   Los tokens nuevos (paleta de dominio, texto-sobre-pastel) son
   ADITIVOS: no existen en v1 y ninguna app v1 los necesita.
   Decisiones y mapeo completo v1→v2: ver NOTAS.md.

   Requiere que la app cargue la fuente Outfit (Google Fonts):
   family=Outfit:wght@300;400;500;600;700;800 (+ DM Mono como en v1)
   ============================================================ */

:root {

  /* --- COLORES BASE --- */
  --black:      #191b26;   /* la "tinta" Caramelo: nunca negro puro */
  --white:      #f7f7f9;
  --muted:      #7d8091;
  --border:     rgba(25,27,38,0.08);  /* compat v1: Caramelo NO usa bordes (#6); solo separadores sutiles */
  --card-bg:    #ffffff;
  --surface:    #efeff3;

  /* Variantes oscuras (footer y bloques en tinta) */
  --on-dark-text:        rgba(242,242,247,0.8);
  --on-dark-text-muted:  rgba(242,242,247,0.5);
  --on-dark-border:      rgba(242,242,247,0.1);
  --on-dark-surface:     rgba(242,242,247,0.06);

  /* Acento secundario fijo */
  --accent2:     #ff4f40;
  --accent2-dim: rgba(255,79,64,0.1);

  /* --- TIPOGRAFÍA ---
     Outfit sustituye a Bebas Neue (display) y a DM Sans (body):
     una sola familia redonda, el peso hace la jerarquía (800 display). */
  --font-display: 'Outfit', sans-serif;
  --font-body:    'Outfit', sans-serif;
  --font-mono:    'DM Mono', monospace;

  --text-xs:    0.68rem;
  --text-sm:    0.78rem;
  --text-base:  0.875rem;
  --text-md:    1rem;
  --text-lg:    1.05rem;

  --leading-tight:  1;
  --leading-snug:   1.5;
  --leading-normal: 1.65;
  --leading-loose:  1.75;

  --tracking-wide:   0.06em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.14em;

  /* --- ESPACIADO --- (idéntico a v1) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-28: 7rem;

  /* --- BORDES Y RADIOS --- (Caramelo: radios generosos) */
  --radius-sm:   10px;
  --radius-md:   18px;
  --radius-lg:   26px;
  --radius-full: 9999px;

  /* --- SOMBRAS --- (sustituyen a los bordes, #6) */
  --shadow-sm:  0 2px 8px rgba(25,27,38,0.06);
  --shadow-md:  0 4px 20px rgba(25,27,38,0.06);
  --shadow-lg:  0 18px 44px rgba(25,27,38,0.12);
  --shadow-xl:  0 32px 80px rgba(25,27,38,0.16);

  /* --- TRANSICIONES — spring physics --- (idéntico a v1) */
  --spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast:   0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-base:   0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-slow:   0.4s  cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: 0.3s  cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* --- Z-INDEX --- (idéntico a v1) */
  --z-nav:   100;
  --z-modal: 999;
  --z-toast: 1000;
}

/* ============================================================
   TEMAS
   Claro = default (vive en :root, sin flash antes de nav.js).
   Oscuro = elección explícita via html[data-theme="dark"].
   Mismos nombres de token que v1; ADEMÁS la paleta de dominio
   (coral/teal/viole/ambar/cielo) se define POR TEMA para que los
   pasteles se traduzcan solos al oscuro.
   ============================================================ */

/* TEMA OSCURO — traducción Caramelo del negro+lima de v1:
   tinta azulada en vez de negro puro, coral avivado como acento. */
html[data-theme="dark"] {
  --bg:            #14151f;
  --fg:            #f2f2f7;
  --accent:        #ff6a5c;
  --accent-dim:    rgba(255,106,92,0.14);
  --accent-hover:  #ff8377;
  --shadow-accent: 0 8px 24px rgba(255,106,92,0.25);
  --shadow-glow:   0 0 40px rgba(255,106,92,0.15);
  --nav-bg:        rgba(20,21,31,0.92);
  --nav-border:    rgba(242,242,247,0.06);
  --card-surface:  #1d1f2e;
  --text-secondary: rgba(242,242,247,0.6);

  /* v2 tematiza también los básicos (en v1 vivían solo en :root
     y no volteaban en oscuro — corregido, ver NOTAS.md) */
  --muted:    #9a9daf;
  --border:   rgba(242,242,247,0.08);
  --card-bg:  #1d1f2e;
  --surface:  #20222f;

  /* Sombras: en oscuro pesan más para seguir separando capas */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.35);
  --shadow-lg:  0 18px 44px rgba(0,0,0,0.5);
  --shadow-xl:  0 32px 80px rgba(0,0,0,0.6);

  /* --- PALETA DE DOMINIO — saturado + pastel + texto-sobre-pastel --- */
  --coral: #ff6a5c;  --coral-p: #3a2523;  --coral-t: #ff9a90;
  --teal:  #17d3ab;  --teal-p:  #123129;  --teal-t:  #55e0bf;
  --viole: #837cff;  --viole-p: #262349;  --viole-t: #aaa5ff;
  --ambar: #ffc233;  --ambar-p: #34290f;  --ambar-t: #ffce66;
  --cielo: #55aeff;  --cielo-p: #16293e;  --cielo-t: #8ec9ff;

  /* --- ESTADOS DE UI — warning / danger / info ---
     PENDIENTE (heredado de v1): tokens de CATEGORÍA DE ACTIVO sin
     definir a propósito; decidir al diseñar el comparador. */
  --warning:     #ffc233;
  --warning-dim: #34290f;
  --danger:      #ff6a5c;
  --danger-dim:  #3a2523;
  --info:        #55aeff;
  --info-dim:    #16293e;

  /* --- ESCALA DE PROFUNDIDAD — UIs de datos densos ---
     Misma convención v1: número más alto = más profundo/tenue/fuerte. */
  --surface-1:   #1d1f2e;
  --surface-2:   #232536;
  --surface-3:   #101018;
  --overlay:     rgba(0,0,0,0.6);
  --text-3:      #7d8091;
  --text-4:      #62657a;
  --text-5:      #4a4d60;
  --border-2:    #2c2e40;
  --border-3:    #34364a;
}

/* TEMA CLARO — default */
:root,
[data-theme="light"] {
  --bg:            #f7f7f9;
  --fg:            #191b26;
  --accent:        #ff4f40;
  --accent-dim:    rgba(255,79,64,0.1);
  --accent-hover:  #e6392b;
  --shadow-accent: 0 8px 24px rgba(255,79,64,0.25);
  --shadow-glow:   0 0 40px rgba(255,79,64,0.15);
  --nav-bg:        rgba(247,247,249,0.92);
  --nav-border:    rgba(25,27,38,0.06);
  --card-surface:  #ffffff;
  --text-secondary: rgba(25,27,38,0.6);

  /* --- PALETA DE DOMINIO — saturado + pastel + texto-sobre-pastel --- */
  --coral: #ff4f40;  --coral-p: #ffe9e6;  --coral-t: #c22b1e;
  --teal:  #00b894;  --teal-p:  #dcf5ef;  --teal-t:  #007a62;
  --viole: #635bff;  --viole-p: #e9e8ff;  --viole-t: #4a43d6;
  --ambar: #ffb300;  --ambar-p: #fff3d6;  --ambar-t: #a86f00;
  --cielo: #2d9cff;  --cielo-p: #e2f1ff;  --cielo-t: #1f7fd6;

  /* --- ESTADOS DE UI — warning / danger / info --- */
  --warning:     #b97900;
  --warning-dim: #fff3d6;
  --danger:      #d92c1f;
  --danger-dim:  #ffe9e6;
  --info:        #1f7fd6;
  --info-dim:    #e2f1ff;

  /* --- ESCALA DE PROFUNDIDAD ---
     Ojo: en Caramelo la elevación sube hacia BLANCO (tarjeta = #fff
     sobre gris frío), al revés que en v1 claro. Convención intacta. */
  --surface-1:   #ffffff;
  --surface-2:   #f1f1f5;
  --surface-3:   #ebebf0;
  --overlay:     rgba(25,27,38,0.45);
  --text-3:      #9a9daf;
  --text-4:      #b0b3c2;
  --text-5:      #c6c8d4;
  --border-2:    #e3e4ea;
  --border-3:    #d7d8e0;
}