/* ============================================================
   Fades — tokens
   Generado desde brand/brand.tokens.json. NO editar valores acá:
   se cambian en el JSON y se regenera. Cualquier color, tamaño o
   espaciado del sitio sale de estas variables.
   ============================================================ */
:root{
  /* --- primitivo: color --- */
  --marca-100:#EAFFAF;
  --marca-500:#C8FF1E;
  --marca-900:#6E8F00;
  --neutral-0:#FFFFFF;
  --neutral-100:#EDEDE7;
  --neutral-200:#E4E3DA;
  --neutral-300:#C9C8BE;
  --neutral-400:#828176;
  --neutral-500:#9A9A93;
  --neutral-600:#5F5F58;
  --neutral-700:#2A2A26;
  --neutral-800:#141411;
  --neutral-900:#0A0A0A;
  /* Triplete RGB del negro: las capas de scrim necesitan alpha variable y
     rgba() no puede leer un hex de una custom property. */
  --neutral-900-rgb:10,10,10;

  /* --- semántico: superficie --- */
  --sup-base:var(--neutral-100);
  --sup-elevada:var(--neutral-200);
  --sup-inversa:var(--neutral-900);
  --sup-inversa-elevada:var(--neutral-800);
  --sup-acento:var(--marca-500);

  /* --- semántico: texto --- */
  --txt-principal:var(--neutral-900);
  --txt-secundario:var(--neutral-600);
  --txt-sobre-inversa:var(--neutral-100);
  --txt-secundario-inversa:var(--neutral-500);
  --txt-sobre-acento:var(--neutral-900);
  --txt-acento-inversa:var(--marca-500);

  /* --- semántico: borde --- */
  --bor-sutil:var(--neutral-300);
  --bor-interactivo:var(--neutral-400);
  --bor-fuerte:var(--neutral-900);
  --bor-sutil-inversa:var(--neutral-700);

  /* --- primitivo: espacio --- */
  --e1:4px; --e2:8px; --e3:16px; --e4:24px;
  --e5:40px; --e6:64px; --e7:104px; --e8:168px;

  /* --- tipografía: familias --- */
  --f-display:"Archivo","Archivo Expanded",system-ui,sans-serif;
  --f-texto:"Archivo",system-ui,sans-serif;
  --f-dato:"Martian Mono",ui-monospace,SFMono-Regular,monospace;

  /* --- tipografía: los siete roles. Escala CERRADA. --- */
  --display-size:clamp(3.25rem,13vw,11rem);
  --display-lh:0.86; --display-w:800; --display-tr:-0.03em;
  --headline-size:clamp(2rem,5vw,3.5rem);
  --headline-lh:0.95; --headline-w:800; --headline-tr:-0.02em;
  --kicker-size:0.75rem;   --kicker-lh:1;    --kicker-w:500; --kicker-tr:0.18em;
  --subhead-size:clamp(1.125rem,2vw,1.5rem);
  --subhead-lh:1.35; --subhead-w:500; --subhead-tr:-0.01em;
  --body-size:1rem;        --body-lh:1.6;    --body-w:400;   --body-tr:0;
  --dato-size:0.9375rem;   --dato-lh:1.2;    --dato-w:500;   --dato-tr:0.02em;
  --caption-size:0.8125rem;--caption-lh:1.45;--caption-w:400;--caption-tr:0.01em;
  --body-l-size:1.0625rem; --body-l-lh:1.4;  --body-l-w:500; --body-l-tr:-0.01em;

  /* --- escala de NOMBRE (agregada en Fase 7) ---
     El nombre del barbero es el objeto principal del sitio y aparece en cuatro
     niveles. Siempre Archivo Expanded 800 en mayúsculas: nunca se comporta
     como texto, así que tiene su propia escala en vez de tamaños sueltos. */
  --nombre-s:1.375rem;
  --nombre-m:1.5rem;
  --nombre-l:1.75rem;
  --nombre-xl:clamp(3rem,12vw,9rem);   /* ELEMENTO FIRMA */

  /* --- escala de DATO --- */
  --dato-l:1.5rem;
  --dato-xs:0.6875rem;

  /* --- movimiento: dos dominios que nunca se cruzan --- */
  --mov-rapido:140ms;      --ease-rapido:cubic-bezier(.2,0,0,1);
  --mov-lento:640ms;       --ease-lento:cubic-bezier(.16,1,.3,1);

  /* --- forma: regla binaria --- */
  --borde:1px;
  --borde-acento:2px;   /* solo el filete de las citas de barbero */
  --radio-chico:0px;    /* TODO */
  --radio-grande:999px; /* SOLO píldoras de estado y filtros */

  /* --- control: alturas mínimas --- */
  --tap-min:44px;
  --control-alto-s:40px;       /* píldoras de filtro en puntero fino */
  --foco-ancho:3px;
  --foco-offset:2px;
  --subrayado-offset:4px;
  --control-alto:52px;
  --control-alto-l:72px;
  --control-alto-dia:88px;
  --control-ancho-dia:76px;

  /* --- layout ---
     NOTA: los breakpoints de las media queries NO pueden usar custom
     properties (límite de CSS, no descuido). Están listados en
     brand.tokens.json > breakpoints para que existan como sistema. */
  --contenedor:1440px;
  --ancho-flujo:820px;         /* columna del flujo de reserva y de la tira del hero */
  --ancho-lectura:760px;       /* columna de texto de la ficha */
  --slot-min:88px;             /* ancho mínimo de un horario en la grilla */
  --margen:var(--e4);
}
@media (min-width:768px){ :root{ --margen:var(--e5); } }

@media (prefers-reduced-motion:reduce){
  :root{ --mov-lento:0ms; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; }
}