/* ============================================================================
 * AE Soluciones Laborales · tokens del sitio v1
 * ============================================================================
 *
 * Capa 1 (PRIMITIVOS DE MARCA): copia literal de brand/tokens.css. No editar.
 *   Resincronizar:  copy brand\tokens.css web_nueva\assets\css\tokens-brand.css
 *   y volcar los cambios aquí abajo en el bloque "MARCA".
 *
 * Capa 2 (DERIVADOS DE SITIO): tokens nuevos SOLO derivados de los hues de
 *   marca. Regla de brand-spec.md: no se inventan hues. Todo lo de abajo es
 *   el mismo verde pino o la misma arena, movidos en luminosidad y croma.
 *
 * Capa 3 (SEMÁNTICOS POR PISTA): el sitio se divide en dos audiencias.
 *   --track-* se redefine dentro de cada pista para que los componentes no
 *   tengan que saber en qué sección viven.
 * ========================================================================= */

:root {
  /* ==========================================================
   * MARCA · medidos del logo por histograma
   * ======================================================= */
  --pine: #3c6557;
  --pine-deep: #284a2f;
  --sand: #c5b39b;
  --mist: #acb9af;
  --ink-soft: #333;

  --pine-abyss: #16261d;
  --pine-tint: #eaf0ec;
  --sand-light: #e8dfd2;
  --ink: #1c2420;
  --ink-muted: #5a615b;
  --paper: #faf8f4;
  --paper-raised: #fff;

  --ink-a06: rgb(28 36 32 / 6%);
  --ink-a08: rgb(28 36 32 / 8%);
  --ink-a12: rgb(28 36 32 / 12%);
  --ink-a60: rgb(28 36 32 / 60%);
  --paper-a08: rgb(250 248 244 / 8%);
  --paper-a16: rgb(250 248 244 / 16%);
  --paper-a70: rgb(250 248 244 / 70%);

  /* ==========================================================
   * DERIVADOS DE SITIO · mismo hue, otra luminosidad
   * ======================================================= */

  /* Verde vivo. Único uso: acento sobre fondo oscuro y auroras.
     No cumple contraste como texto sobre --paper. */
  --pine-lift: #4e8570;
  --pine-glow: #6aa88d;

  /* Arena cálida más luminosa, para titulares sobre --pine-abyss. */
  --sand-glow: #d9c7ad;

  /* Superficies sobre fondo oscuro. Reemplazan a "gris translúcido". */
  --dark-surface: #1d3129;
  --dark-surface-2: #244034;
  --sand-a10: rgb(197 179 155 / 10%);
  --sand-a18: rgb(197 179 155 / 18%);
  --sand-a30: rgb(197 179 155 / 30%);
  --pine-a14: rgb(60 101 87 / 14%);
  --pine-a24: rgb(60 101 87 / 24%);

  /* Gradientes. Recorren pino → arena. Nunca morado/rosa/azul ni neón. */
  --grad-brand: linear-gradient(118deg, var(--pine-deep) 0%, var(--pine) 46%, var(--sand) 100%);
  --grad-brand-soft: linear-gradient(118deg, var(--pine-tint) 0%, var(--sand-light) 100%);
  --grad-text: linear-gradient(96deg, var(--sand-glow) 0%, var(--paper) 55%, var(--pine-glow) 100%);

  /* Grano. SVG inline: no pesa red y no se puede desincronizar. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");

  /* ==========================================================
   * TIPOGRAFÍA
   * ======================================================= */
  --font-display: "Instrument Serif", georgia, "Times New Roman", serif;
  --font-body: "Manrope", "Segoe UI", helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", consolas, monospace;

  /* Escala fluida. Más contraste que el v0: el display crece hasta 6.5rem
     para que el sitio se lea como editorial, no como plantilla de SaaS. */
  --t-mega: clamp(3rem, 8.4vw, 6.5rem);
  --t-display: clamp(2.5rem, 5.6vw, 4.5rem);
  --t-h2: clamp(2rem, 4.2vw, 3.5rem);
  --t-h3: clamp(1.375rem, 1.8vw, 1.75rem);
  --t-h4: clamp(1.0625rem, 1.1vw, 1.1875rem);
  --t-body-lg: clamp(1.0625rem, 1.15vw, 1.25rem);
  --t-body: clamp(1rem, 0.95vw, 1.0625rem);
  --t-small: 0.9375rem;
  --t-micro: 0.8125rem;
  --t-nano: 0.6875rem;

  --lh-display: 0.96;
  --lh-heading: 1.1;
  --lh-body: 1.65;

  --ls-display: -0.03em;
  --ls-heading: -0.015em;
  --ls-eyebrow: 0.16em;

  /* ==========================================================
   * ESPACIO Y RETÍCULA · base 4 px
   * ======================================================= */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --s20: 5rem;
  --s24: 6rem;
  --s32: 8rem;

  --section-y: clamp(4.5rem, 9vw, 9rem);
  --measure: 1240px;
  --measure-wide: 1440px;
  --measure-narrow: 46rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 4.5rem;

  /* ==========================================================
   * FORMA
   * ======================================================= */

  /* La pista de empresas usa radios chicos (señal editorial).
     La de candidatos usa los radios de la app (20 px). Ver styles.css. */
  --r-flush: 2px;
  --r-card: 6px;
  --r-btn: 8px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --e1: 0 1px 2px var(--ink-a06);
  --e2: 0 8px 24px var(--ink-a08);
  --e3: 0 2px 4px rgb(28 36 32 / 5%), 0 18px 48px rgb(28 36 32 / 10%);
  --e-dark: 0 2px 6px rgb(0 0 0 / 24%), 0 24px 64px rgb(0 0 0 / 32%);
  --hairline: 1px solid var(--ink-a12);
  --hairline-dark: 1px solid var(--sand-a18);

  /* ==========================================================
   * MOVIMIENTO
   * ======================================================= */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 160ms;
  --d-base: 280ms;
  --d-slow: 480ms;
  --d-reveal: 640ms;
  --stagger: 70ms;

  /* ==========================================================
   * SEMÁNTICOS POR PISTA · valor por defecto = superficie clara
   * ======================================================= */
  --track-bg: var(--paper);
  --track-surface: var(--paper-raised);
  --track-fg: var(--ink);
  --track-fg-muted: var(--ink-muted);
  --track-accent: var(--pine);
  --track-line: var(--ink-a12);
  --track-radius: var(--r-card);
  --track-shadow: var(--e2);
}

/* Pista oscura. La aplican las secciones de candidatos y los cierres.
   Al cambiar solo --track-*, los componentes se adaptan sin duplicar CSS. */
.is-dark {
  --track-bg: var(--pine-abyss);
  --track-surface: var(--dark-surface);
  --track-fg: var(--paper);
  --track-fg-muted: rgb(250 248 244 / 66%);
  --track-accent: var(--sand);
  --track-line: var(--sand-a18);
  --track-radius: var(--r-lg);
  --track-shadow: var(--e-dark);

  background-color: var(--track-bg);
  color: var(--track-fg-muted);
  color-scheme: dark;
}