/* ============================================================================
   TONINA MKT — DESIGN TOKENS
   Sistema de identidad visual · Growth Marketing boutique · Buenos Aires
   ----------------------------------------------------------------------------
   Filosofía: la tonina es el delfín franciscana del Río de la Plata — el más
   pequeño y veloz, el único delfín que se mueve igual en agua dulce y salada.
   Precisión (hocico fino), fluidez (movimiento) y adaptabilidad. La identidad
   traduce eso: base cálida coral sobre un azul-negro de estuario nocturno,
   con un acento "plata de río" frío que aporta el filo y la profundidad que las
   consultoras genéricas (violeta/cyan tech, gradientes neón) no tienen.
   ============================================================================ */

:root {

  /* ---------------------------------------------------------------------------
     COLOR
     --------------------------------------------------------------------------- */

  /* reason: azul-negro profundo = el Río de la Plata de noche. Más frío y
     menos "marrón" que un negro puro; da seriedad sin el cliché dark-tech. */
  --color-bg: #0a1116;

  /* reason: surface un paso más claro que bg, mismo croma frío, para separar
     cards/módulos sin necesidad de bordes duros. Mantiene profundidad de agua. */
  --color-bg-surface: #111c24;

  /* reason: coral apagado heredado de la marca = piel de la franciscana.
     Cálido, humano, anti-corporativo. Es la firma. Se conserva tal cual. */
  --color-accent-primary: #d99685;

  /* reason: coral más saturado/encendido SOLO para hover y estados activos,
     para que la acción "respire" sin introducir un color nuevo. */
  --color-accent-primary-hover: #e8a895;

  /* reason: acento secundario NUEVO — "plata de río". Cian frío desaturado que
     evoca el reflejo del agua y el filo/precisión del hocico. Justifica su lugar
     como contrapunto frío al coral cálido: la dupla cálido/frío es lo que
     diferencia a Tonina del monocromo de la competencia. Uso quirúrgico. */
  --color-accent-secondary: #7fb0b8;

  /* reason: texto principal no es blanco puro (#fff cansa sobre fondo oscuro);
     un blanco-niebla cálido baja el contraste justo para lectura larga. */
  --color-text-primary: #f3ede9;

  /* reason: texto secundario / metadatos. Gris azulado que pertenece a la
     familia del bg, no un gris neutro importado. */
  --color-text-muted: #8a98a0;

  /* reason: borde apenas perceptible, definido como coral translúcido para que
     incluso las líneas pertenezcan a la marca y no sean grises de sistema. */
  --color-border: rgba(217, 150, 133, 0.16);

  /* Tokens utilitarios derivados */
  --color-accent-primary-soft: rgba(217, 150, 133, 0.12); /* fondos de badge/halo */
  --color-accent-secondary-soft: rgba(127, 176, 184, 0.12);
  --color-success: #8fc8a0;   /* reason: verde salvia, no neón, coherente con paleta apagada */
  --color-warning: #e0c27f;   /* reason: gold templado, eco del gold de Moto Morini (cliente real) */

  /* ---------------------------------------------------------------------------
     TIPOGRAFÍA
     --------------------------------------------------------------------------- */

  /* reason: Playfair Display = títulos. Serif de alto contraste, editorial,
     da el aire "boutique con criterio" que ninguna consultora tech usa. Sus
     trazos finos evocan el hocico afilado de la tonina. Stack con serif system. */
  --font-display: "Playfair Display", "Georgia", "Times New Roman", serif;

  /* reason: Jost = cuerpo y UI. Geométrica humanista, limpia y rioplatense en
     su neutralidad; contrasta con la serif sin pelear. Fallbacks geométricos. */
  --font-body: "Jost", "Futura", "Century Gothic", "Helvetica Neue", system-ui, sans-serif;

  /* reason: mono para datos/reportes — los números de un reporte de growth
     deben alinearse. Solo aparece en contextos de métricas. */
  --font-mono: "IBM Plex Mono", "SFMono-Regular", "Menlo", monospace;

  /* Escala tipográfica — type scale ~1.25 (cuarta mayor suavizada).
     reason: escala modular para jerarquía consistente entre landing y reporte. */
  --fs-h1: clamp(2.5rem, 6vw, 4rem);      /* display hero */
  --fs-h2: clamp(1.9rem, 4vw, 2.75rem);
  --fs-h3: clamp(1.35rem, 2.5vw, 1.6rem);
  --fs-body: 1.0625rem;                    /* 17px — lectura cómoda */
  --fs-caption: 0.875rem;
  --fs-label: 0.75rem;                     /* uppercase tracking labels */

  --lh-tight: 1.08;   /* títulos display */
  --lh-snug: 1.25;    /* h3 / subtítulos */
  --lh-body: 1.6;     /* cuerpo */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;     /* Playfair bold para énfasis editorial */

  --tracking-label: 0.16em;  /* reason: labels en mayúscula necesitan aire */
  --tracking-tight: -0.02em; /* reason: títulos grandes se cierran un toque */

  /* ---------------------------------------------------------------------------
     ESPACIADO — sistema 8pt
     reason: 8pt grid = ritmo vertical predecible, base de cualquier sistema serio.
     --------------------------------------------------------------------------- */
  --space-xs: 0.5rem;   /* 8  */
  --space-sm: 1rem;     /* 16 */
  --space-md: 1.5rem;   /* 24 */
  --space-lg: 2.5rem;   /* 40 */
  --space-xl: 4rem;     /* 64 */
  --space-2xl: 6rem;    /* 96 */

  /* ---------------------------------------------------------------------------
     BORDES Y RADIO
     reason: radios contenidos — boutique premium ≠ burbujas redondas. Apenas
     suavizado para que se sienta cuidado pero con filo (precisión de la tonina).
     --------------------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --border-width: 1px;

  /* ---------------------------------------------------------------------------
     SOMBRAS
     reason: sombras frías y profundas (no negras puras) para que las cards
     floten sobre "agua" sin el típico drop-shadow de plantilla.
     --------------------------------------------------------------------------- */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--color-border);
  --shadow-elevated: 0 12px 40px -8px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--color-border);

  /* ---------------------------------------------------------------------------
     MOVIMIENTO — la tonina se mueve. Transiciones suaves, nunca bruscas.
     --------------------------------------------------------------------------- */
  --ease-fluid: cubic-bezier(0.4, 0.1, 0.2, 1);
  --transition-base: 0.25s var(--ease-fluid);

  /* Layout */
  --container-max: 1100px;
}

/* ----------------------------------------------------------------------------
   MODO CLARO — para reportes, PDFs y documentos cara a cliente.
   reason: el sistema debe servir landing premium (oscuro) Y reporte impreso
   (claro). Misma marca, se invierte el lienzo. Activar con [data-theme="light"].
   ---------------------------------------------------------------------------- */
[data-theme="light"] {
  --color-bg: #f7f3f0;            /* niebla cálida, no blanco clínico */
  --color-bg-surface: #ffffff;
  --color-accent-primary: #c06b56; /* reason: coral más oscuro para contraste AA sobre claro */
  --color-accent-primary-hover: #a85742;
  --color-accent-secondary: #4f7d85;
  --color-text-primary: #14202a;
  --color-text-muted: #5d6b73;
  --color-border: rgba(20, 32, 42, 0.12);
  --color-accent-primary-soft: rgba(192, 107, 86, 0.10);
  --shadow-card: 0 1px 3px rgba(20, 32, 42, 0.08), 0 0 0 1px var(--color-border);
  --shadow-elevated: 0 12px 32px -8px rgba(20, 32, 42, 0.18), 0 0 0 1px var(--color-border);
}