/* ============================================================
   IGNIX · design tokens
   Único lugar donde se declaran colores, tipografías y escalas.

   PALETA: la real de ignix.com.ar, relevada del repo ignix-ng
   (#32b8b8 teal de marca, #00ffff cian de luz, #333 grafito,
   #f1f1f1 claro), convertida a oklch.

   NOMENCLATURA: la de basement-mcp — `--basement-*` para marca y
   estado con el patrón `on-color`, `--theme-*` para superficies.
   Debajo hay una capa de alias corta que consumen los componentes,
   así el día que basement cambie un valor se toca sólo acá.

   UNIDADES — regla del sistema, se cumple en todo el proyecto.
   La BASE es 16px: el tamaño por defecto del navegador. No se fija
   font-size en <html>, así el usuario puede subirlo desde su config
   y todo escala. Por eso 1em = 1rem = 16px, y --fs-body es 1em.
     · font-size    → em   (relativo al padre; Poppins y Montserrat)
     · medidas      → rem  (base 16: espaciado, radios, anchos, --tap)
     · line-height  → sin unidad
     · breakpoints  → em   (en media query, em y rem valen 16px fijos)
     · letter-spacing → em (tiene que escalar con la tipografía)
     · TODO valor lleva un decimal como máximo. Las únicas cifras
       con más precisión son letter-spacing (milésimas de em, si se
       redondean se rompen) y los componentes de color en oklch.

   Únicas excepciones en px, a propósito:
     · trazos de 1 a 2px (border, outline): en rem se ven borrosos
     · sombras (--shadow-*) y blur del backdrop: son efectos, no medidas
   ============================================================ */

:root {
  color-scheme: light;

  /* ═══ MARCA · estructura basement-mcp ════════════════════════
     El primario es el teal de Ignix, no el azul por defecto de
     basement. Ojo: es un teal CLARO, así que el texto que se apoya
     encima va en grafito, nunca en blanco. */
  --basement-primary:            oklch(71.4% 0.111 195);  /* #32b8b8 */
  --basement-primary-light:      oklch(80% 0.085 195);
  --basement-primary-container:  oklch(94% 0.030 195);
  --basement-primary-ink:        oklch(48% 0.085 197);    /* teal legible sobre claro */
  --basement-on-primary:         oklch(24% 0.020 200);

  --basement-secondary:          oklch(90.5% 0.155 195);  /* #00ffff · luz, no acción */
  --basement-on-secondary:       oklch(24% 0.020 200);

  --basement-success:            oklch(52.3% 0.135 144);
  --basement-warning:            oklch(63% 0.140 75);
  --basement-error:              oklch(53% 0.190 25);
  --basement-info:               oklch(52% 0.110 245);
  --basement-on-success:         oklch(98% 0.004 150);
  --basement-on-warning:         oklch(24% 0.020 60);
  --basement-on-error:           oklch(98% 0.004 20);

  /* ═══ SUPERFICIES · estructura theme ═════════════════════════ */
  --theme-bg:            oklch(97% 0.002 200);   /* #f5f5f5 del sitio */
  --theme-bg-deep:       oklch(26% 0.014 210);   /* franjas oscuras */
  --theme-surface:       oklch(100% 0 0);
  --theme-surface-2:     oklch(95.8% 0.002 200); /* #f1f1f1 */
  --theme-surface-sunk:  oklch(92.5% 0.003 200);
  --theme-sidenav-bg:    oklch(26% 0.014 210);

  --theme-text:          oklch(32.1% 0.008 210); /* #333 */
  --theme-text-muted:    oklch(51% 0.006 210);   /* #666 */
  --theme-text-invert:   oklch(97% 0.002 200);
  --theme-text-invert-muted: oklch(76% 0.006 210);

  --theme-border:        oklch(90.7% 0.003 200); /* #e0e0e0 */
  --theme-border-strong: oklch(82% 0.005 200);
  --theme-border-invert: oklch(37% 0.014 210);
  --theme-divider:       var(--theme-border);

  /* ═══ ALIAS · lo que consumen los componentes ════════════════
     Capa puente: ningún componente conoce basement ni theme. */
  --bg:            var(--theme-bg);
  --bg-deep:       var(--theme-bg-deep);
  --surface:       var(--theme-surface);
  --surface-2:     var(--theme-surface-2);
  --surface-sunk:  var(--theme-surface-sunk);

  --fg:            var(--theme-text);
  --fg-invert:     var(--theme-text-invert);
  --muted:         var(--theme-text-muted);
  --muted-invert:  var(--theme-text-invert-muted);

  --border:        var(--theme-border);
  --border-strong: var(--theme-border-strong);
  --border-invert: var(--theme-border-invert);

  --accent:        var(--basement-primary);
  --accent-press:  var(--basement-primary-ink);
  --accent-ink:    var(--basement-primary-ink);
  --accent-soft:   color-mix(in oklch, var(--basement-primary) 18%, transparent);
  --on-accent:     var(--basement-on-primary);
  --link:          var(--basement-primary-ink);

  /* acento de dominio: la niebla de agua. Sólo en arte de producto,
     tiles de rubro y notas informativas — nunca en acciones. */
  --water:         var(--basement-secondary);
  --water-soft:    color-mix(in oklch, var(--basement-secondary) 16%, transparent);

  --ok:            var(--basement-success);
  --warn:          var(--basement-warning);
  --danger:        var(--basement-error);
  --info:          var(--basement-info);
  --ok-soft:       color-mix(in oklch, var(--ok) 13%, transparent);
  --warn-soft:     color-mix(in oklch, var(--warn) 16%, transparent);
  --danger-soft:   color-mix(in oklch, var(--danger) 12%, transparent);
  --info-soft:     color-mix(in oklch, var(--info) 12%, transparent);

  --fg-soft:       color-mix(in oklch, var(--fg) 5%, transparent);
  --fg-softer:     color-mix(in oklch, var(--fg) 2.5%, transparent);
  --shadow-sm:     0 1px 2px color-mix(in oklch, var(--fg) 8%, transparent);
  --shadow-md:     0 6px 20px color-mix(in oklch, var(--fg) 10%, transparent);
  --shadow-lg:     0 18px 48px color-mix(in oklch, var(--fg) 16%, transparent);

  /* ═══ TIPOGRAFÍA ═════════════════════════════════════════════
     Las mismas dos familias que el sitio self-hostea en
     ignix-ng/public/fonts: Poppins para display, Montserrat para
     cuerpo. Acá van por stack del sistema, sin fuentes remotas. */
  --font-display: 'Poppins', 'Montserrat', 'Avenir Next', -apple-system,
                  BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Montserrat', 'Open Sans', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* ---- escala tipográfica (fluida 360 → 1920) --------------
     Base 16px = el tamaño por defecto del navegador. 1em = 16px.
     El px al lado de cada línea es sólo referencia de lectura. */
  --fs-body:    1em;                            /*      16   */
  --fs-sm:      0.9em;                          /*      14,4 */
  --fs-meta:    0.8em;                          /*      12,8 */
  --fs-h3:      1.1em;                          /*      17,6 */
  --fs-lead:    clamp(1em, 1.3vw, 1.1em);       /* 16   → 17,6 */
  --fs-h2:      clamp(1.4em, 2.4vw, 1.8em);     /* 22,4 → 28,8 */
  --fs-h1:      clamp(1.7em, 3.6vw, 2.5em);     /* 27,2 → 40   */
  --fs-display: clamp(2.1em, 5.2vw, 3.8em);     /* 33,6 → 60,8 */

  /* ---- espaciado (escala de 4, redondeada a 1 decimal) ------ */
  --sp-1: 0.2rem;  --sp-2: 0.5rem;  --sp-3: 0.8rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;

  /* ---- layout ---------------------------------------------- */
  --container: 77.5rem;
  --container-narrow: 53.8rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 4rem;

  /* ---- forma ----------------------------------------------- */
  --radius-xs: 0.4rem;
  --radius:    0.6rem;
  --radius-lg: 1rem;
  --radius-xl: 1.4rem;
  --radius-pill: 62.5rem;   /* píldora: cualquier valor grande */

  /* ---- movimiento ------------------------------------------ */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 380ms;

  /* ---- táctil ---------------------------------------------- */
  --tap: 2.8rem;
}

/* ============================================================
   Tema oscuro
   El sitio ya tiene claro/oscuro por variables; acá se replica.
   El teal es claro en los dos temas, así que --on-accent sigue
   siendo grafito: no se da vuelta.
   ============================================================ */
[data-theme='dark'] {
  color-scheme: dark;

  --theme-bg:            oklch(20% 0.012 210);
  --theme-bg-deep:       oklch(15% 0.010 210);
  --theme-surface:       oklch(24% 0.013 210);
  --theme-surface-2:     oklch(27.5% 0.014 210);
  --theme-surface-sunk:  oklch(17.5% 0.011 210);
  --theme-sidenav-bg:    oklch(15% 0.010 210);

  --theme-text:          oklch(95.5% 0.003 200);
  --theme-text-muted:    oklch(69% 0.008 205);
  --theme-text-invert:   oklch(97% 0.002 200);
  --theme-text-invert-muted: oklch(72% 0.008 205);

  --theme-border:        oklch(31.5% 0.013 210);
  --theme-border-strong: oklch(42% 0.014 210);
  --theme-border-invert: oklch(31% 0.013 210);

  --basement-primary:            oklch(76% 0.115 195);
  --basement-primary-light:      oklch(84% 0.080 195);
  --basement-primary-container:  oklch(32% 0.045 197);
  --basement-primary-ink:        oklch(84% 0.090 195);
  --basement-on-primary:         oklch(18% 0.020 200);

  --basement-secondary:          oklch(88% 0.140 195);
  --basement-success:            oklch(74% 0.150 155);
  --basement-warning:            oklch(80% 0.140 78);
  --basement-error:              oklch(69% 0.175 25);
  --basement-info:               oklch(74% 0.105 245);

  --shadow-sm:     0 1px 2px oklch(0% 0 0 / 0.45);
  --shadow-md:     0 6px 20px oklch(0% 0 0 / 0.5);
  --shadow-lg:     0 18px 48px oklch(0% 0 0 / 0.6);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}