/* =============================================================
   OFELIA · DESIGN SYSTEM — TOKENS  (v0.1)
   -------------------------------------------------------------
   Archivo ÚNICO y AISLADO del refresh visual.
   - CSS plano: NO pasa por el build de Tailwind.
   - Fuente única de verdad de los tokens (colores, tipografía,
     espaciado, forma). Tailwind sólo los referencia con var().
   - Nombres idénticos a los del design system original para que
     el HTML/markup del DS funcione sin cambios.

   Cómo usar:
     1) En CSS/Twig:   color: var(--neutral-900);
     2) En Tailwind:   class="bg-of-neutral-50 text-of-accent rounded-of-pill"

   Los demás CSS heredados se irán eliminando poco a poco.
   ============================================================= */

/* ----------------------------------------------------------------
   FUENTES · Degular   (archivos en web/fonts/ → servidos en /fonts/)
   Subidas: Degular Display + Degular Mono (varios pesos).
   NOTA: la familia de texto "Degular" (cuerpo/UI) no se subió; por eso
   --font-ui usa "Degular Display" como fuente de marca real mientras tanto.
   ---------------------------------------------------------------- */

/* ---- Degular Display (títulos / UI) ---- */
@font-face { font-family:"Degular Display"; src:url("/fonts/DegularDisplay-Light.woff2") format("woff2");        font-weight:300; font-style:normal;  font-display:swap; }
@font-face { font-family:"Degular Display"; src:url("/fonts/DegularDisplay-LightItalic.woff2") format("woff2");  font-weight:300; font-style:italic;  font-display:swap; }
@font-face { font-family:"Degular Display"; src:url("/fonts/DegularDisplay-Regular.woff2") format("woff2");      font-weight:400; font-style:normal;  font-display:swap; }
@font-face { font-family:"Degular Display"; src:url("/fonts/DegularDisplay-RegularItalic.woff2") format("woff2");font-weight:400; font-style:italic;  font-display:swap; }
@font-face { font-family:"Degular Display"; src:url("/fonts/DegularDisplay-Medium.woff2") format("woff2");       font-weight:500; font-style:normal;  font-display:swap; }
@font-face { font-family:"Degular Display"; src:url("/fonts/DegularDisplay-MediumItalic.woff2") format("woff2"); font-weight:500; font-style:italic;  font-display:swap; }
@font-face { font-family:"Degular Display"; src:url("/fonts/DegularDisplay-Semibold.woff2") format("woff2");     font-weight:600; font-style:normal;  font-display:swap; }
@font-face { font-family:"Degular Display"; src:url("/fonts/DegularDisplay-Bold.woff2") format("woff2");         font-weight:700; font-style:normal;  font-display:swap; }
@font-face { font-family:"Degular Display"; src:url("/fonts/DegularDisplay-BoldItalic.woff2") format("woff2");   font-weight:700; font-style:italic;  font-display:swap; }
@font-face { font-family:"Degular Display"; src:url("/fonts/DegularDisplay-Black.woff2") format("woff2");        font-weight:900; font-style:normal;  font-display:swap; }
@font-face { font-family:"Degular Display"; src:url("/fonts/DegularDisplay-BlackItalic.woff2") format("woff2");  font-weight:900; font-style:italic;  font-display:swap; }

/* ---- Degular Mono (etiquetas / captions / código) ---- */
@font-face { font-family:"Degular Mono"; src:url("/fonts/DegularMono-Light.woff2") format("woff2");    font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Degular Mono"; src:url("/fonts/DegularMono-Regular.woff2") format("woff2");  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Degular Mono"; src:url("/fonts/DegularMono-Medium.woff2") format("woff2");   font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Degular Mono"; src:url("/fonts/DegularMono-Semibold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

/* ----------------------------------------------------------------
   TOKENS
   ---------------------------------------------------------------- */
:root {
  /* ---------- NEUTROS (núcleo: 90% de la interfaz) ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F2F3F4; /* fondo de página (off-white) */
  --neutral-100: #E7E9EB; /* superficie sutil / hover */
  --neutral-200: #D6D9DC; /* bordes y divisores */
  --neutral-300: #BCC0C4; /* divisor fuerte / disabled */
  --neutral-400: #9BA0A4; /* placeholder / texto disabled */
  --neutral-500: #72767A; /* texto secundario */
  --neutral-600: #54585C; /* iconos / texto terciario */
  --neutral-700: #3A3D40;
  --neutral-900: #252729; /* texto primario + ACCIÓN (near-black) */

  /* ---------- AZUL DE MARCA (atmósfera, no acción) ---------- */
  --blue-tint:  #DCE6EA; /* relleno claro / base de cristal */
  --blue-light: #A9C5CD; /* fin del gradiente */
  --blue-mid:   #6F8B9B; /* inicio del gradiente */
  --blue-deep:  #4A6072; /* azul para texto sobre claro */
  --gradient-hero: linear-gradient(192deg, #6F8B9B 0%, #A9C5CD 99%);

  /* ---------- ACENTO (micro: puntos, marcadores, subrayados) ---------- */
  --accent:     #DEE9A6; /* chartreuse */
  --accent-ink: #7E8A4A; /* versión legible para texto sobre claro */

  /* ---------- SEMÁNTICOS (desaturados, parientes de la paleta) ---------- */
  --success: #6F8B5A;
  --error:   #B5564C;
  --warning: #C5934A;
  --info:    #4A6072;

  /* ---------- TIPOGRAFÍA ---------- */
  --font-display: "Degular Display", "Inter", system-ui, sans-serif;
  /* "Degular" (texto) aún no subida → cae a "Degular Display" antes que Inter */
  --font-ui:      "Degular", "Degular Display", "Inter", system-ui, sans-serif;
  --font-mono:    "Degular Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* ---------- ESPACIADO (base 8) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- FORMA ---------- */
  --radius-0:    0;      /* estructura: imágenes, secciones, cards */
  --radius-sm:   4px;    /* inputs / campos */
  --radius-pill: 999px;  /* interactivo: botones, tags, chips */
  --border: 1px solid var(--neutral-200);
  --grid-line: rgba(37, 39, 41, 0.07); /* patrón de grid */
}