/* =============================================================
   TOKENS — sistema de diseño Frank Morales / Consultor Informático
   Paleta evolucionada del placeholder (bg #0a0e1a, cian #38bdf8,
   azul eléctrico #60a5fa) hacia un registro editorial más oscuro
   y sofisticado. Un único acento cálido ("señal") se añade como
   riesgo estético deliberado: referencia visual a una luz de
   estado operacional (monitoreo 24/7 / continuidad TI), usado con
   máxima moderación (rail de índice, nodo del canvas, pill "en línea").

   2026-07-28: por pedido explícito del cliente se incorpora el
   acento corporativo --color-accent-orange (#ff6a03). Jerarquía de
   color con propósito, no decorativa:
     - cian/azul  → sistema base (marca, botón primario, iconografía)
     - naranja    → foco de atención puntual ("estás aquí" / "en vivo" /
                    hover secundario) — reemplaza al ámbar en el rol de
                    --color-signal, mismo uso restringido documentado.
   Cada sección (#servicios/#proyectos/#clientes/#contacto) recibe además
   una capa de profundidad tonal sutil (ver layout.css) para que el fondo
   deje de sentirse plano sin perder cohesión ni contraste WCAG AA.
============================================================= */

:root {
  /* ---- Color · base ---- */
  --color-bg:            #06070c;   /* fondo principal, más profundo que el placeholder */
  --color-bg-elevated:   #0a0e1a;   /* superficie base heredada del placeholder */
  --color-surface:       #10141f;   /* tarjetas / paneles */
  --color-surface-2:     #151a27;   /* hover de tarjetas */
  --color-border:        rgba(148, 163, 184, 0.14);
  --color-border-strong: rgba(96, 165, 250, 0.32);

  /* ---- Color · tinta ---- */
  --color-ink:           #eef2f7;
  --color-ink-muted:     #93a1b8;
  --color-ink-faint:     #5b6577;

  /* ---- Color · acento (heredado, brand equity) ---- */
  --color-cyan:          #38bdf8;
  --color-blue:          #60a5fa;
  --color-blue-deep:     #3957a2;

  /* ---- Color · acento corporativo naranja ---- */
  --color-accent-orange: #ff6a03;   /* foco de atención puntual — NO usar decorativamente:
                                        solo estados "aquí estás"/"en vivo"/hover secundario */

  /* Variante oscurecida del naranja corporativo, SOLO para texto/iconos
     sobre superficies claras (--color-surface-light). El naranja puro
     (#ff6a03) da ~2.4:1 sobre #f0ece3 (falla AA); esta variante da ~5.18:1. */
  --color-accent-orange-deep: #a34600;

  /* ---- Acento adicional · teal profundo (diagrama de Servicios, 2026-07-29) ----
     Segundo acento "llamativo" para el diagrama interactivo de #servicios
     (ver components.css/.services-diagram__arrow y layout.css/
     .services-diagram__cycle-path), con un rol semántico DISTINTO del
     naranja: el naranja ya es "estás aquí" en todo el sitio (rail activo,
     pill de estado); este teal es "flujo/conexión entre pilares" — el
     estado que se enciende en las flechas y en el arco de ciclo cuando el
     usuario interactúa con un nodo. Solo se usa dentro de #servicios.
     Contraste verificado (luminancia relativa WCAG, mismo método que el
     resto de este archivo):
       #0b5d57 sobre #f0ece3 (fondo de sección) ≈ 6.55:1 (AA/AAA texto normal)
       #0b5d57 sobre #eae4d6 (fondo de card)    ≈ 6.09:1 (AA/AAA texto normal) */
  --color-accent-teal-deep: #0b5d57;

  /* ---- Color · señal (riesgo estético, uso restringido) ----
     Ahora usa el naranja corporativo en vez del ámbar original:
     mismo rol semántico (luz de estado operacional / foco puntual),
     mismo uso restringido documentado, nuevo hex por pedido del cliente. */
  --color-signal:        var(--color-accent-orange);
  --color-signal-dim:    rgba(255, 106, 3, 0.16);

  /* ---- Color · foco de teclado/D-pad (indirección) ----
     Por defecto es el cian de marca. Secciones con fondo claro
     (--color-surface-light) lo sobreescriben localmente porque el cian
     puro pierde visibilidad de foco (contraste ~1.8:1) sobre crema. */
  --color-focus: var(--color-cyan);

  /* ---- Color · superficie clara (franja intercalada editorial) ----
     Tono hueso/crema cálido — deliberadamente NO blanco puro, para que
     combine con la paleta cálida del naranja corporativo. Usado como
     respiro visual entre secciones oscuras (ver #clientes en layout.css).
     Contraste verificado (luminancia relativa WCAG):
       ink-on-light (#1c1a15) sobre #f0ece3        ≈ 15.8:1
       ink-on-light-muted (#6b6255) sobre #f0ece3  ≈ 5.08:1 (AA texto normal) */
  --color-surface-light:      #f0ece3;
  --color-ink-on-light:       #1c1a15;
  --color-ink-on-light-muted: #6b6255;

  /* ---- Color · estado ---- */
  --color-success:       #34d399;
  --color-danger:        #f87171;
  --color-whatsapp:      #25D366;

  /* ---- Tipografía ----
     Montserrat (400/700), cargada LOCALMENTE via @font-face en base.css
     (issets/fonts/) — pedido explícito del cliente. Ronda 3: por pedido
     explícito adicional ("usa Montserrat en todas las secciones"),
     Montserrat es ahora la ÚNICA tipografía sans/display del sitio —
     --font-display y --font-body apuntan al mismo stack. Fraunces (serif
     editorial, usado en rondas 1-2 para H1/H2/H3) se retiró por completo,
     incluido su <link> de Google Fonts en index.html — ya no se carga
     ningún recurso tipográfico externo salvo JetBrains Mono (etiquetas
     técnicas). Se mantienen dos variables (--font-display/--font-body)
     en vez de colapsarlas en una sola para no tener que tocar cada
     selector que ya referenciaba una u otra — misma fuente, roles
     semánticos distintos (titulares vs cuerpo/UI). */
  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body:    'Montserrat', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', ui-monospace, monospace;

  --fs-hero:   clamp(3rem, 10.5vw + 1rem, 13rem); /* 2026-07-28 ronda 3: aun más dominante (ref. richardekwonye.com) */
  --fs-h2:     clamp(2rem, 1.6vw + 1.4rem, 3.4rem);
  --fs-h3:     clamp(1.15rem, 0.4vw + 1rem, 1.5rem);
  --fs-lead:   clamp(1.05rem, 0.35vw + 0.95rem, 1.25rem);
  --fs-body:   1rem;
  --fs-small:  0.8125rem;
  --fs-mono:   0.75rem;

  --lh-tight: 1.04;
  --lh-snug:  1.25;
  --lh-normal: 1.6;

  --tracking-tight: -0.03em;
  --tracking-wide:  0.08em;
  --tracking-wider: 0.16em;

  /* ---- Espaciado ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --space-10: 10rem;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --rail-width: 148px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;

  /* ---- Sombra ---- */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-glow-cyan: 0 0 32px rgba(56, 189, 248, 0.22);
  --shadow-glow-signal: 0 0 28px rgba(255, 106, 3, 0.3);
}

/* Wide color gamut — progressive enhancement sobre el sRGB de arriba */
@media (color-gamut: p3) {
  :root {
    --color-cyan:             color(display-p3 0.29 0.71 0.94);
    --color-blue:             color(display-p3 0.44 0.63 0.95);
    --color-accent-orange:    color(display-p3 0.96 0.44 0.05);
    --color-accent-teal-deep: color(display-p3 0.09 0.36 0.34);
  }
}

@media (prefers-color-scheme: light) {
  /* El sitio es dark-first por identidad de marca; no se ofrece tema claro
     todavía, pero se documenta el gancho para una futura Etapa 2. */
}