/* tokens.css — paleta OKLCH + tipografía Barlow (portado de Propuesta A, validado). */

/* RcioFont — fuente de marca. SOLO contiene los glifos R C I O y # (# = isotipo).
 * Úsala únicamente sobre la palabra "RCIO" (o el isotipo) vía .brand-mark; cualquier
 * otro carácter (punto, espacio, otras letras) caería al fallback. Archivo local de
 * ~2.4 KB, así que no se convierte a woff2 (sin ganancia). font-display: swap → si la
 * fuente no carga, "RCIO" degrada legible en la fuente del sistema. */
@font-face {
  font-family: "RcioFont";
  src: url("../fonts/RcioFont-Regular.ttf") format("truetype"),
       url("../fonts/RcioFont-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: oklch(6% 0.008 75);
  --white: oklch(97% 0.005 75);
  --gray-900: oklch(14.5% 0.008 75);
  --gray-800: oklch(17.8% 0.008 75);
  --gray-700: oklch(21.8% 0.008 75);
  --gray-600: oklch(28.5% 0.008 75);
  --gray-400: oklch(51% 0.008 75);
  --gray-300: oklch(68.3% 0.008 75);
  --gray-100: oklch(84.5% 0.008 75);
  --accent: oklch(96.8% 0.006 75);
  --accent-dark: oklch(17.8% 0.008 75);
  --accent-dim: rgba(245, 244, 243, 0.06);
  --red: #dc2626;
  --font-display: "Barlow Condensed", sans-serif;
  --font-body: "Barlow", sans-serif;
  --font-brand: "RcioFont", "Barlow Condensed", sans-serif;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout: ancho de contenido y aire de página para .site-main (páginas genéricas
   * y WooCommerce). Sin esto, .site-main queda sin padding ni max-width. */
  --rcio-container: 75rem;          /* 1200px */
  --rcio-gap: clamp(1.25rem, 4vw, 2.5rem);

  /* Escala de spacing de 8 puntos (base consumida por los planes 02-05). */
  --space-xs: 0.25rem;  /* 4px  */
  --space-sm: 0.5rem;   /* 8px  */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4rem;    /* 64px */
}