/* ============================================================
   FacilVitrum — Design Tokens v1.1.0
   Fuente: brand-tokens.json (SoT). Generado 2026-06-02 · motion v1.1 2026-06-05.
   Pegable en Bricks (Settings > Custom CSS, scope :root) o
   en el theme de WordPress. NO editar a mano: editar el JSON
   y regenerar. Namespace: --fv-*
   ============================================================ */

:root {
  /* — Color de marca — */
  --fv-turquoise:      #0098c4;   /* acento; NO texto pequeno sobre claro */
  --fv-teal-deep:      #036176;   /* texto/enlaces/CTA sobre claro (AA) */
  --fv-teal-graphite:  #0d3a47;   /* fondo oscuro editorial (nunca #000) */
  --fv-warm-grey:      #676e71;   /* secundario, detalles */
  --fv-ink:            #23231f;   /* titulares y cuerpo sobre claro */

  /* — Neutros — */
  --fv-bone:           #F4F1EA;   /* fondo de pagina */
  --fv-paper:          #FBFAF5;   /* superficies elevadas */
  --fv-rule:           #E3DED3;   /* lineas/bordes calidos */
  --fv-text-soft:      #6e6a62;   /* texto secundario */
  --fv-white:          #FFFFFF;

  /* — Feedback (UI de formularios, NO marca) — */
  --fv-error:          #B0402F;
  --fv-success:        #2C7A5B;

  /* — Semantico: tema claro (por defecto) — */
  --fv-bg:             var(--fv-bone);
  --fv-surface:        var(--fv-paper);
  --fv-heading:        var(--fv-ink);
  --fv-text:           var(--fv-ink);
  --fv-text-2:         var(--fv-text-soft);
  --fv-link:           var(--fv-teal-deep);
  --fv-link-hover:     var(--fv-teal-graphite);
  --fv-border:         var(--fv-rule);
  --fv-accent:         var(--fv-turquoise);
  --fv-on-accent:      var(--fv-white);
  --fv-focus-ring:     var(--fv-teal-deep);

  /* — Tipografia — */
  --fv-font-display: 'Space Grotesk', 'Archivo', system-ui, sans-serif;
  --fv-font-body:    'Inter', 'Open Sans', -apple-system, system-ui, sans-serif;

  --fv-fs-display-xl: 3.25rem;
  --fv-fs-h1:         2.5rem;
  --fv-fs-h2:         1.9rem;
  --fv-fs-h3:         1.35rem;
  --fv-fs-body-lg:    1.125rem;
  --fv-fs-body:       1rem;
  --fv-fs-small:      0.875rem;
  --fv-fs-label:      0.75rem;

  /* — Espaciado (base 4) — */
  --fv-space-xs:  4px;
  --fv-space-sm:  8px;
  --fv-space-md:  16px;
  --fv-space-lg:  24px;
  --fv-space-xl:  32px;
  --fv-space-2xl: 48px;
  --fv-space-3xl: 64px;
  --fv-space-4xl: 96px;

  /* — Radius — */
  --fv-radius-sm:   4px;
  --fv-radius-md:   8px;
  --fv-radius-lg:   14px;
  --fv-radius-full: 9999px;

  /* — Sombras (estilo plano) — */
  --fv-shadow-sm:   0 1px 2px rgba(35,35,31,0.06);
  --fv-shadow-card: 0 2px 10px rgba(13,58,71,0.06);
  --fv-shadow-ring: 0 0 0 1px var(--fv-focus-ring);

  /* — Layout — */
  --fv-container:        1200px;
  --fv-container-narrow: 760px;
  --fv-gutter:           24px;
  --fv-section-y:        96px;

  /* — Motion — */
  --fv-dur-fast: 140ms;
  --fv-dur-base: 220ms;
  --fv-ease:     cubic-bezier(.2,.6,.2,1);

  /* — Vidrio / capa de movimiento (opcional, v1.1) — */
  --fv-glass-blur:        14px;                  /* desenfoque del panel de vidrio */
  --fv-glass-blur-bar:    12px;                  /* barra/nav sticky de vidrio */
  --fv-glass-tint:        rgba(255,255,255,.16); /* tinte del vidrio sobre fondo */
  --fv-glass-border:      rgba(255,255,255,.5);  /* filo del vidrio */
  --fv-glass-tint-dark:   rgba(13,58,71,.30);    /* vidrio sobre fondo claro (barra) */
  --fv-shine:             rgba(255,255,255,.7);  /* haz de luz del reflejo */
  --fv-shine-2:           rgba(150,224,242,.5);  /* tinte turquesa del reflejo */
}

/* — Superficie oscura editorial (teal-grafito). Aplicar a una
   seccion con la clase .fv-dark; remapea los tokens semanticos. — */
.fv-dark {
  --fv-bg:         var(--fv-teal-graphite);
  --fv-surface:    #0f4655;
  --fv-heading:    var(--fv-white);
  --fv-text:       #dfe9ec;
  --fv-text-2:     #9bb4bc;
  --fv-link:       #7fd3e8;
  --fv-link-hover: var(--fv-white);
  --fv-border:     rgba(255,255,255,0.14);
  --fv-focus-ring: #7fd3e8;
}