/* ============================================================
   Crece+ — Design tokens
   Fuente única de verdad: color, tipografía, espacio, motion.
   Todo lo demás consume estas variables. Nada de valores
   sueltos en los componentes.
   ============================================================ */

:root {
  /* --- Color: base clara, azul profesional como voz ---------
     Paleta definida por el cliente (Elemento-Color-HEX.csv).
     Los valores marcados como «derivado» no venían en la lista:
     cubren escalones que la paleta no contempla (brillo del
     acento, el dorado en tamaño de texto, borde reforzado, borde
     de control y hover de superficie) y se mantienen dentro de la
     misma familia. Los que sí venían en el CSV están intactos.
     Ver tools/test-contraste.mjs para el porqué de cada uno. */
  --paper-cool: #F8FAFC;   /* fondo principal — blanco frío     */
  --blue-050:   #EFF6FF;   /* fondo secundario — azul muy claro */
  --white:      #FFFFFF;   /* tarjetas                          */

  --navy-900:   #172033;   /* texto principal — azul marino     */
  --slate-500:  #64748B;   /* texto secundario — gris azulado   */

  --blue-600:   #2563EB;   /* color principal                   */
  --blue-700:   #1D4ED8;   /* botones principales               */

  --gold-500:   #B88935;   /* acento premium — dorado suave     */
  --gold-400:   #D4A857;   /* derivado: brillo del acento       */
  --gold-700:   #8A6520;   /* derivado: el dorado como TEXTO    */

  --carbon-700:  #2C2C2C;  /* gris carbón del brief original; no
                              venía en el CSV de la paleta         */

  --border-200: #E2E8F0;   /* bordes — gris claro               */
  --border-300: #CBD5E1;   /* derivado: borde reforzado         */
  --border-500: #7C8AA0;   /* derivado: borde de campo (3:1)    */
  --surface-2:  #F1F5FD;   /* derivado: hover de superficie     */

  /* Roles semánticos (los componentes usan estos, no los de arriba) */
  --bg:            var(--paper-cool);
  --bg-deep:       var(--blue-050);
  --surface:       var(--white);
  --surface-hover: var(--surface-2);
  --line:          var(--border-200);
  --line-strong:   var(--border-300);
  --text:          var(--navy-900);
  --text-2:        var(--slate-500);
  /* Sobre un fondo claro no queda hueco para un tercer tono de
     texto: cualquier gris más claro que #64748B cae por debajo de
     4.5:1. El tercer nivel de jerarquía lo dan el tamaño, el peso
     y el tracking —que es como debería darse de todos modos— y no
     un gris más flojo. Así que terciario = secundario. */
  --text-3:        var(--slate-500);
  --primary:       var(--blue-600);
  --primary-deep:  var(--blue-700);
  --accent:        var(--gold-500);   /* relleno gráfico */
  --accent-text:   var(--gold-700);   /* el mismo acento cuando es texto */
  --line-field:    var(--border-500); /* borde de control: 1.4.11 pide 3:1 */
  --carbon:        var(--carbon-700); /* aros giratorios de la órbita       */

  /* Tinte azul para estados: sobre fondo claro, un hover en gris
     neutro se ve sucio; teñido con el azul de marca, se ve
     intencionado. */
  --tint:        rgba(37, 99, 235, 0.06);
  --tint-strong: rgba(37, 99, 235, 0.11);

  /* Capa oscura para el texto que va encima de fotografía
     (overlays de portfolio, scrim del hero). Ahí el texto sigue
     siendo blanco: es el único sitio del sitio donde ocurre. */
  --overlay:     rgba(23, 32, 51, 0.88);
  --on-overlay:  var(--white);

  --danger:  #C2453C;
  --success: #157F52;

  /* Material translúcido — el blur va aparte para poder
     desactivarlo con prefers-reduced-transparency. */
  --glass:      rgba(248, 250, 252, 0.72);
  --glass-deep: rgba(255, 255, 255, 0.88);
  --glass-blur: blur(24px) saturate(150%);
  --glass-edge: rgba(23, 32, 51, 0.07); /* sobre fondo claro el canto se define con sombra, no con luz */

  /* Gradiente de marca: del azul marino al azul principal.
     Sustituye al brillo metálico de la versión oscura — un
     degradado plateado sobre fondo claro no se ve. */
  --sheen: linear-gradient(104deg,
      #172033 0%, #172033 38%,
      #2563EB 64%, #1D4ED8 100%);

  /* --- Tipografía ----------------------------------------- */
  /* Inter si está instalada/servida; si no, la fuente del
     sistema, que ya trae optical sizing y tracking afinados. */
  --font: "Inter", "Inter var", -apple-system, BlinkMacSystemFont,
          "Segoe UI", system-ui, "Helvetica Neue", sans-serif;

  /* Escala fluida. Todo en rem para que respete el tamaño de
     texto del usuario y el layout escale CON la tipografía. */
  --t-display: clamp(2.75rem, 7.2vw, 6.5rem);
  --t-h1:      clamp(2.25rem, 5.2vw, 4.25rem);
  --t-h2:      clamp(1.75rem, 3.4vw, 2.875rem);
  --t-h3:      clamp(1.25rem, 1.8vw, 1.5rem);
  --t-lead:    clamp(1.0625rem, 1.5vw, 1.3125rem);
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-micro:   0.75rem;

  /* Tracking dependiente del tamaño: negativo al crecer,
     positivo al encoger. Nunca un valor único para todo. */
  --tr-display: -0.035em;
  --tr-h1:      -0.028em;
  --tr-h2:      -0.022em;
  --tr-h3:      -0.014em;
  --tr-body:     0em;
  --tr-micro:    0.14em;  /* eyebrows / labels en mayúsculas */

  /* --- Espacio (escala 4pt) ------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;
  --s-4: 1rem;     --s-5: 1.5rem;   --s-6: 2rem;
  --s-7: 3rem;     --s-8: 4rem;     --s-9: 6rem;
  --s-10: 8rem;    --s-11: 11rem;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 68ch;      /* ancho máximo cómodo de lectura */
  --page: 1440px;
  --radius: 4px;        /* lujo contemporáneo = esquinas casi rectas */
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* --- Motion --------------------------------------------- */
  /* Curvas para transiciones NO gestuales. Todo lo que el
     usuario puede agarrar usa springs en JS (assets/js/spring.js). */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);   /* inversa de --ease-out */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --d-press: 100ms;   /* feedback de presión: casi instantáneo */
  --d-fast:  180ms;
  --d-base:  320ms;
  --d-slow:  620ms;

  /* Sombras teñidas de azul marino. Sobre fondo claro una sombra
     negra pura se lee gris sucio. */
  --shadow-sm: 0 1px 2px rgba(23, 32, 51, .06);
  --shadow-md: 0 12px 32px -12px rgba(23, 32, 51, .18);
  --shadow-lg: 0 40px 80px -32px rgba(23, 32, 51, .24);

  --z-nav: 100;
  --z-sheet: 200;
  --z-float: 150;
  --z-loader: 300;
}