/* ADN Soluciones — Design Tokens */

:root {
  /* ── Constantes de marca ─────────────────────────────────────────────────
     Los 3 colores del manual, tal cual. NO son tokens semánticos: son la
     identidad fija y no cambian entre paletas. Los tokens semánticos
     (--accent, --warn…) sí se redefinen por paleta y son los que usan los
     componentes.

     Regla de uso, derivada de los contrastes sobre blanco:
       --adn-blue  5.00 → sirve como texto y como relleno de botón
       --adn-gold  3.45 → SOLO decoración: filetes, bordes, iconografía
       --adn-cyan  1.72 → SOLO gráfico: degradados y rellenos con tinta encima
     Ningún texto usa cyan ni oro directamente sobre fondo claro.            */
  --adn-blue: #0566f3;
  --adn-cyan: #0ddcd1;
  --adn-gold: #ad840a;

  /* Degradado del isotipo — cyan → azul. Reservado para el logo y bordes clave. */
  --adn-gradient: linear-gradient(135deg, var(--adn-cyan) 0%, var(--adn-blue) 100%);
  /* Filete dorado, recurso gráfico dominante del manual. Marcador estructural. */
  --adn-hairline: linear-gradient(90deg, transparent, var(--adn-gold) 50%, transparent);
  /* Media versión: arranca sólido a la izquierda, se disuelve a la derecha.
     Para encabezados alineados a la izquierda. */
  --adn-hairline-start: linear-gradient(90deg, var(--adn-gold), transparent);

  /* ── Tipografía ─────────────────────────────────────────────────────── */
  /* Manual de marca ADN Soluciones: DIN Next (títulos) + Inter (cuerpo).
     DIN Next es comercial → se usa D-DIN PRO, clon open source (SIL OFL 1.1).
     JetBrains Mono se conserva para precios y SKU: sus cifras tabulares evitan
     que los montos en CLP "bailen" al actualizarse. El manual asigna los datos
     técnicos a Inter — desviación consciente, revisable. */
  --font-display: "D-DIN PRO", "DIN Next", "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.16em;

  /* ── Paleta: luxe (default) ──────────────────────────────────────────── */
  --bg:         #f4f5f8;
  --surface:    #ffffff;
  --surface-2:  #e9ebf1;
  --line:       #d1d3df;
  --line-2:     #bcbfcf;
  --ink:        #2c3a52;
  --ink-2:      #4c5a74;
  --mute:       #8b91a4;
  --accent:     #3d6f80;   /* azul petróleo */
  --accent-2:   #557eb4;   /* azul medio */
  --accent-ink: #ffffff;
  /* Texto que se apoya sobre --accent-2. Se declara aparte de --accent-ink
     porque hay paletas donde accent-2 es claro (p.ej. el cyan de ADN) y el
     blanco encima no cumple contraste. */
  --accent-2-ink: #ffffff;
  --warn:       #b07d2e;
  --ok:         #457e8f;

  /* ── Espaciado ───────────────────────────────────────────────────────── */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container-max: 1400px;
  --container-pad: clamp(1rem, 4vw, 2rem);

  /* ── Radios ──────────────────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ── Sombras (coloreadas con ink) ────────────────────────────────────── */
  --shadow-sm:  0 1px 3px  color-mix(in oklab, var(--ink) 12%, transparent);
  --shadow-md:  0 4px 12px color-mix(in oklab, var(--ink) 14%, transparent);
  --shadow-lg:  0 8px 28px color-mix(in oklab, var(--ink) 16%, transparent);
  --shadow-xl:  0 16px 48px color-mix(in oklab, var(--ink) 18%, transparent);

  /* ── Movimiento ──────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.37, 0, 0.63, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 700ms;

  /* ── Z-index ─────────────────────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-header:  100;
  --z-overlay: 200;
  --z-drawer:  300;
  --z-toast:   400;
}

/* ── Paleta ADN Soluciones — LIGHT LUXURY (paleta oficial) ──────────────────
   Fuente: docs/marca/manual-de-marca-alianzadn.pdf · destilado en tokens-marca.md

   Dirección: fondo blanco, los azules cargan jerarquía y contraste, el dorado
   aparece solo como filete decorativo. Lujo por aire y precisión tipográfica,
   no por saturación.

   Contrastes verificados sobre #ffffff (WCAG 2.1):
     ink      #0a1526  18.29 ✅ AAA
     ink-2    #33445e   9.86 ✅ AAA   texto de párrafo
     mute     #64748b   4.76 ✅ AA    metadatos
     accent   #0566f3   5.00 ✅ AA    enlaces, kickers, relleno de CTA
     accent-2 #0b3ea8   9.26 ✅ AAA   hover, énfasis, relleno secundario
     gold-ink #8a6907   5.12 ✅ AA    el único dorado admisible como TEXTO
     gold     #ad840a   3.45 ❌ texto · ✅ 3:1 no-texto → solo filetes y bordes
     cyan     #0ddcd1   1.72 ❌ todo  → solo degradado, o relleno con tinta encima

   Los neutros llevan sesgo azul deliberado (no gris puro): la rampa desciende
   hacia #0a1526, un casi-negro azulado que coincide con cómo el propio manual
   renderiza su "negro" — un azul petróleo muy oscuro, no un neutro plano.

   El cyan NO desaparece del rebrand: vive en el logo y en --adn-gradient, que
   es donde el manual lo usa. Sobre blanco es ilegible como texto, así que
   forzarlo ahí rompería la accesibilidad sin ganar identidad.                */
html[data-palette="adn"] {
  --bg:         #ffffff;   /* blanco puro: el fondo pedido */
  --surface:    #ffffff;   /* las tarjetas se definen por filete, no por relleno */
  --surface-2:  #f2f5fa;   /* banda fría tenue — ritmo entre secciones */
  --line:       #dfe5ee;
  --line-2:     #c3cddb;
  --ink:        #0a1526;
  --ink-2:      #33445e;
  --mute:       #64748b;
  --accent:     #0566f3;
  --accent-2:   #0b3ea8;
  --accent-ink: #ffffff;   /* 5.00 sobre --accent — AA */
  --accent-2-ink: #ffffff; /* 9.26 sobre --accent-2 — AAA */
  --warn:       #8a6907;   /* dorado oscurecido: el que sí puede ser texto */
  --ok:         #0e7c86;   /* 4.95 ✅ AA */

  /* Sombras frías y muy suaves. En light luxury la elevación se insinúa;
     el peso visual lo lleva el filete, no la sombra. */
  --shadow-sm:  0 1px 2px  color-mix(in oklab, var(--ink) 6%, transparent);
  --shadow-md:  0 2px 8px  color-mix(in oklab, var(--ink) 8%, transparent);
  --shadow-lg:  0 8px 24px color-mix(in oklab, var(--ink) 10%, transparent);
  --shadow-xl:  0 20px 48px color-mix(in oklab, var(--ink) 12%, transparent);
}

/* ── Variante oscura ADN (la paleta de julio, preservada) ───────────────────
   Sigue siendo válida para piezas sobre negro. Contrastes sobre #000000:
   cyan 12.18 AAA · gold 6.08 AA · blue 4.20 (solo texto grande, por eso el
   azul aquí es relleno de botón y no color de texto).                       */
html[data-palette="adn-noir"] {
  --bg:         #000000;
  --surface:    #0b0f14;
  --surface-2:  #141a22;
  --line:       #232b36;
  --line-2:     #333d4b;
  --ink:        #ffffff;
  --ink-2:      #c8cfd8;
  --mute:       #8590a0;
  --accent:     #0566f3;
  --accent-2:   #0ddcd1;
  --accent-ink: #ffffff;
  --accent-2-ink: #000000; /* 12.18 sobre el cyan. Blanco daría 1.72 ❌ */
  --warn:       #ad840a;
  --ok:         #0ddcd1;

  /* En fondo oscuro las sombras no se leen: la elevación se comunica con
     borde + glow del acento, no con sombra proyectada. */
  --shadow-sm:  0 0 0 1px color-mix(in oklab, var(--line) 80%, transparent);
  --shadow-md:  0 0 0 1px var(--line), 0 4px 16px rgb(0 0 0 / 0.6);
  --shadow-lg:  0 0 0 1px var(--line-2), 0 8px 32px rgb(0 0 0 / 0.7);
  --shadow-xl:  0 0 0 1px var(--line-2), 0 16px 56px rgb(0 0 0 / 0.8);
}

/* ── Variante oscura: luxe-noir ─────────────────────────────────────────── */
html[data-palette="luxe-noir"] {
  --bg:        #262f3f;
  --surface:   #2e394c;
  --surface-2: #364660;
  --line:      #3f4d66;
  --line-2:    #54658a;
  --ink:       #eef0f6;
  --ink-2:     #c2c8d8;
  --mute:      #8b94ab;
  --accent:    #6fa6bb;
  --accent-2:  #88a9d6;
  --accent-ink: #1b2433;
  --warn:      #e6c06a;
  --ok:        #7bc0c9;
}

/* ── Variante steel (demo) ──────────────────────────────────────────────── */
html[data-palette="steel"] {
  --bg:        #0c1116;
  --surface:   #131a22;
  --surface-2: #1a232d;
  --line:      #25313d;
  --line-2:    #36475a;
  --ink:       #eef3f8;
  --ink-2:     #b9c4d1;
  --mute:      #74829a;
  --accent:    #5fb8ff;
  --accent-2:  #88c5ff;
  --accent-ink: #0c1116;
  --warn:      #f0c060;
  --ok:        #5bc8cc;
}