/* ============================================================================
   TOKENS — sitio YCM360, variante topology (fork de demo-v3 MERIDIANO)
   Mutación 5 (F1 del plan 20260715-001): la piel pasa al kit de marca
   branding-ycm360 brand/v2.1-teal (tailwind.config.js + 06-color-system.md):
     - paleta tierra/cobre -> neutrales claros + teal #0D7464 + mint (dark) + ámbar
     - Bricolage -> Space Grotesk (display) e Inter (cuerpo); Space Mono se queda
       como estrato técnico (TBD 5)
     - escala display landing 11rem/6.5rem [PROPUESTA ratificada, extensión del kit]
     - radios y sombras del kit; --measure 1200px para lectura (shell 1560 composición)
   El root fluido y el mecanismo de la escala vienen de demo-v3 (matemática de
   artboard 1920, no valor de marca). Contrastes citados = certificados del brief.
   ============================================================================ */

/* Root fluido: TODA la fluidez del sistema vive en esta regla; los tokens son proporciones.
   A 1920 el root vale 16px, así que cada rem computa idéntico al artboard de diseño. */
html { font-size: clamp(12.5px, 0.8333vw, 22px); }

:root {
  /* --- Color: neutrales claros del kit + teal; un solo acento cálido (ámbar) --- */
  --ground:        #FAFBFC;  /* fill/100: fondo claro de app/lectura */
  --ground-2:      #F1F3F5;  /* fill/200: paneles elevados claros */
  --ground-3:      #E9ECEF;  /* fill/300: hover de superficies claras */
  --ink:           #212529;  /* text/600: texto principal (15.9:1 sobre ground) */
  --ink-2:         #495057;  /* text/500: secundario (7.4:1 AAA sobre ground) */
  --ink-3:         #495057;  /* labels con significado exigen >=4.5:1; #868E96 NO pasa y queda solo decorativo */
  --stroke:        #DEE2E6;  /* stroke/200: líneas sutiles */
  --stroke-2:      #CED4DA;  /* stroke/300: líneas visibles */
  --accent:        #0D7464;  /* primary/500: marca, CTA sobre claro (5.68:1) */
  --accent-bright: #339785;  /* primary/400: hover / UI no-texto; texto SOLO grande (3.56:1) */
  --accent-deep:   #0A5C4F;  /* primary/600: pressed (7.4:1 AAA) */

  /* --- Superficies dark-premium y sus tintas (hero y secciones de impacto) --- */
  --ground-dark:   #04211D;  /* surface/800: hero/portada; fallback del gradiente (blanco 16.9:1) */
  --surface-dark:  #073A33;  /* surface/700: cards oscuras (blanco 12.6:1) */
  --ink-inverse:   #FFFFFF;  /* texto primario sobre dark */
  --ink-inverse-2: #C8E6E0;  /* text-inverse/500: secundario sobre dark */
  --stroke-dark:   rgba(94, 234, 212, 0.16);  /* [PROPUESTA] líneas sobre dark, derivada de mint */
  --mint:          #5EEAD4;  /* mint/300: arcos, datos/acentos sobre dark (11.4:1 sobre ground-dark) */
  --mint-2:        #2DD4BF;  /* mint/400: variante media (9.1:1 sobre ground-dark) */

  /* Ámbar: ÚNICO acento cálido. SOLO sobre surface-dark/ground-dark (6.5:1 / 8.7:1) o como
     forma/CTA. PROHIBIDO como texto pequeño sobre teal medio #0D7464 (2.92:1, regla dura 1). */
  --ember:         #FFA726;
  --ember-press:   #E68A00;

  /* Gradiente canónico del hero (ADR-003). #149683 es SOLO stop: prohibido como texto o fill. */
  --gradient-hero: radial-gradient(120% 130% at 80% -10%, #149683 0%, #0D7464 42%, #04211D 100%);

  /* --- Tipografía de marca --- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'Cascadia Code', 'Courier New', monospace;

  /* Escala display landing en rem PURO (proporción del artboard; fluidez = el root).
     [PROPUESTA ratificada]: extensión de jerarquía para landing; mega baja de 13 a 11rem
     (Space Grotesk 700 es más ancha que Bricolage) y hero a 6.5rem (el H1 real trae 12 palabras). */
  --fs-mega:      11rem;
  --fs-hero:      6.5rem;
  --fs-section:   4.25rem;
  --fs-statement: 3.1rem;  /* sin uso activo desde escala-editorial-display (los statements toman --fs-section); se conserva como paso intermedio disponible */
  /* Lectura protegida: pisos ergonómicos del kit (cuerpo >=16px, piso absoluto 12px). */
  --fs-body:      clamp(16px, 1.15rem, 21px);
  --fs-small:     max(14px, 0.9rem);
  --fs-label:     max(12px, 0.76rem);  /* mono, uppercase, tracking abierto */
  /* El ROTULO de seccion (h2: Problema, Casos, Ventaja...) salio de --fs-label con el change
     titulo-de-seccion-con-jerarquia. Compartia token con el indice numeral, los eyebrows, los
     tags, el nav y los botones: los cinco rendian 12px identicos, asi que el rotulo primario
     de una seccion pesaba lo mismo que una anotacion de apoyo y la jerarquia la sostenia solo
     el color. Mismo idioma max() que --fs-body y --fs-small: no estrena mecanica. */
  --fs-section-label: max(15px, 1.15rem);
  /* El numeral de un paso del proceso acompania a un titulo de ~53px, no a un rotulo de 15px,
     asi que pesa mas que el del head (change indice-del-paso-escala-con-su-titulo). El techo
     no lo puso el ancho de la columna (aguanta 22px sin desbordar) sino el tracking de 0.10em:
     a 22px separa tanto los digitos que "01" se lee como dos caracteres sueltos. */
  --fs-step-index: max(18px, 1.4rem);
  /* Indice de una seccion cuyo titulo es de escala DISPLAY (hoy solo el aside pinneado del
     Proceso, que encabeza un titulo de 80px a 1440). Es la cuarta enmienda del mismo hilo: el
     numeral se quedaba en 12px, o sea 33% MAS CHICO que los numerales de los pasos que preside
     (change indice-de-seccion-manda-sobre-sus-pasos).
     Se expresa como MULTIPLO del token del paso y no como un valor suelto: el invariante que se
     rompio tres veces es "la seccion manda sobre sus pasos", y de esta forma sobrevive por
     construccion a que cualquiera de los dos se re-afine. Medido: 22.5px hasta 1500 de viewport
     (el root esta clavado en 12.5px ahi abajo), 28 a 1920 y 37.3 a 2560, siempre 1.25x el
     numeral del paso. */
  --fs-display-index: calc(var(--fs-step-index) * 1.25);

  --tracking-mega:  -0.02em;   /* re-test contra Space Grotesk 700 en QA (riesgo R8) */
  --tracking-hero:  -0.02em;
  --tracking-tight: -0.01em;
  --tracking-label: 0.10em;   /* tipografia-contratos: el valor del brief (07-typography-system);
                                 el 0.22em era herencia editorial MERIDIANO (B lo corrigio con fecha) */

  /* --- Ritmo espacial: dos estratos (decisión G del plan) --- */
  --shell:      1560px;                      /* composición display [PROPUESTA ratificada] */
  --measure:    1200px;                      /* lectura y UI: el max del kit */
  --gutter:     clamp(1.25rem, 4vw, 3.5rem);
  --section-y:  clamp(4.5rem, 11vw, 10rem);
  /* Aire entre el head de una seccion y su primer contenido. Vivia literal en .section__head;
     se extrae porque la bajada de la pared lo CANCELA con un calc para pegarse a su rotulo
     (change bajada-se-agrupa-con-su-rotulo), y dos literales iguales en archivos distintos
     divergen en silencio la proxima vez que alguien afine el head. Mismo valor de siempre. */
  --space-head: clamp(2.5rem, 6vw, 5rem);
  /* Separador de la pared de casos (change fronteras-moviles-pared): filas + bajada, nada mas.
     Piso 4.5rem = 3.0x la mayor costura interna de telefono (row-gap del cerebro, 18.75px con
     el root pinneado); techo 6rem conserva el desktop en 75px. En columna unica el aire es la
     unica frontera junto al cambio de medio ventana/texto, por eso guarda proporcion, no valor. */
  --space-case: clamp(4.5rem, 11vw, 6rem);
  --rule:       1px;

  /* --- Radios y sombras del kit --- */
  --r-btn:  8px;
  --r-card: 16px;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* --- Movimiento: easing firma compartido (la auditoría del kit propone el mismo) --- */
  --ease-swift:   cubic-bezier(0.7, 0, 0.3, 1);   /* firma */
  --ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);  /* salida rápida */
  --ease-arc:     cubic-bezier(0.22, 0.61, 0.18, 1); /* antes ease-terrain: reveals del motivo */
  --d-fast:   0.3s;
  /* Cruce del chrome del nav (change chrome-legible-en-transito): velo y textos del header
     transicionan JUNTOS con esta duración corta. A 0.5s el crossfade sostenía frames de
     contraste ~1:1 (medido); corto y sincronizado, el instante mixto es un parpadeo. */
  --d-chrome: 0.15s;
  --d-base:   0.5s;
  --d-smooth: 0.7s;
  --d-slow:   0.9s;

  --z-canvas: 0;
  --z-content: 10;
  --z-nav: 40;
  --z-cursor: 90;

  color-scheme: light;
}

/* Rescate móvil/tablet: bajo el piso del root (12.5px) los rem dejan de fluir; endpoints
   en px inmunes al root, recalibrados a la escala landing (proporción 11/13 del demo). */
@media (max-width: 1200px) {
  :root {
    --fs-mega:      clamp(48px, 11vw, 136px);
    --fs-hero:      clamp(38px, 7.4vw, 90px);
    --fs-section:   clamp(32px, 5vw, 56px);
    --fs-statement: clamp(25px, 3.6vw, 40px);
  }
}

/* Un único acento cálido (ámbar) y disciplina 60-30-10: 60% neutrales, 30% teal/surface,
   10% acentos (mint es familia teal, no cuenta como segundo hue). */