/* ============================================================
   Folios · brand tokens v1
   Ink · Paper · Record Green — el motor fiscal auditable

   Los --folios-* son FIJOS. No se sobrescriben nunca.
   Un tema de cliente (white-label) sólo puede tocar --brand-*.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* --- núcleo, inmutable --- */
  --folios-ink:            #111A1C;  /* fondo. NO es negro puro — nunca #000 */
  --folios-ink-2:          #182225;  /* superficie elevada */
  --folios-paper:          #F5F2EC;  /* texto y superficie de documento */
  --folios-record-green:   #3EA384;  /* "existe, quedó asentado, se puede inspeccionar" */
  --folios-record-green-d: #34775A;  /* variante profunda, para fondo claro (contraste) */
  --folios-amber:          #C98A2E;  /* excepción / bloqueo. NO es un acento cálido */

  /* --- derivados --- */
  --folios-line:  rgba(245, 242, 236, .10);
  --folios-muted: rgba(245, 242, 236, .50);

  /* --- tipografía --- */
  --folios-font-display: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --folios-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* --- movimiento --- */
  --folios-ease:      cubic-bezier(.16, .9, .28, 1);
  --folios-dur:       320ms;   /* rango válido: 240–520ms */
  --folios-travel:    12px;    /* desplazamiento MÁXIMO. nunca más */

  /* --- radios --- */
  --folios-radius:    12px;
  --folios-radius-lg: 22px;

  /* ============================================================
     Marca del cliente · white-label
     Se inyectan en runtime. Son los ÚNICOS que un tema puede tocar.
     ============================================================ */
  --brand-primary: var(--folios-record-green);
  --brand-surface: var(--folios-ink-2);
  --brand-on:      var(--folios-paper);   /* debe dar ≥ 4.5:1 sobre --brand-surface */
}

/* Regla dura de movimiento: el estado final, instantáneo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------
   Escala tipográfica
   ------------------------------------------------------------ */
.f-display { font-family: var(--folios-font-display); font-weight: 900;
             font-size: clamp(38px, 7vw, 68px); letter-spacing: -.035em; line-height: .95; }
.f-title   { font-family: var(--folios-font-display); font-weight: 700;
             font-size: clamp(26px, 4vw, 40px); letter-spacing: -.028em; }
.f-body    { font-family: var(--folios-font-display); font-weight: 400;
             font-size: 16.5px; line-height: 1.55; }
.f-label   { font-family: var(--folios-font-mono); font-size: 11px;
             letter-spacing: .16em; text-transform: uppercase; }
/* Todo lo que es un DATO y no una frase: folio, UUID, fecha, estado, monto. */
.f-data    { font-family: var(--folios-font-mono); font-size: 13px; letter-spacing: -.01em; }

/* ------------------------------------------------------------
   Estado — el verde marca UNA cosa, y sólo esa
   ------------------------------------------------------------ */
.f-state            { font-family: var(--folios-font-mono); font-size: 10px;
                      letter-spacing: .11em; text-transform: uppercase;
                      display: inline-flex; align-items: center; gap: 7px;
                      color: var(--folios-record-green); }
.f-state::before    { content: ''; width: 5px; height: 5px; border-radius: 50%;
                      background: currentColor;
                      animation: f-pulse 620ms var(--folios-ease) 1; /* UNA vez. no loop. */ }
.f-state--exception { color: var(--folios-amber); }
.f-state--idle      { color: var(--folios-muted); }

@keyframes f-pulse {
  from { box-shadow: 0 0 0 0 currentColor; opacity: .4 }
  to   { box-shadow: 0 0 0 6px transparent; opacity: 1 }
}