/* ═══════════════════════════════════════════════════════════════════════════
   ORIGEN — Design Tokens / CSS Variables
   ═══════════════════════════════════════════════════════════════════════════
   Paleta centralizada. Para cambiar la estética completa de la app,
   solo tocás este archivo.

   CONTRASTE:
   - --text  (#f0ece4) sobre --bg (#080808) → ratio ~18:1 ✓
   - --text2 (#b5ada3) sobre --bg (#080808) → ratio ~10:1 ✓ (era #888 → 4.5:1)
   - --text3 (#958e84) sobre --bg (#080808) → ratio ~7:1  ✓ (era #888 → 4.5:1)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ── */
  --bg:      #080808;
  --bg2:     #0f0f0f;
  --bg3:     #141414;

  /* ── Borders ── */
  --border:  #1e1e1e;
  --border2: #2a2a2a;

  /* ── Border radius ── */
  --radius: 6px;

  /* ── Text — escala de legibilidad ──
     text  = contenido principal (nombres, títulos cuerpo)
     text2 = contenido secundario (bios, descripciones, metadatos importantes)
     text3 = terciario (labels, hints, timestamps, placeholders)
  */
  --text:    #f0ece4;
  --text2:   #b5ada3;
  --text3:   #958e84;

  /* ── Accent (dorado cálido) ── */
  --accent:     #c8b89a;
  --accent-dim: rgba(200, 184, 154, 0.12);

  /* ── Semantic colors ── */
  --green:     #4a9a6a;
  --green-dim: rgba(74, 154, 106, 0.12);
  --red:       #c85a5a;
  --red-dim:   rgba(200, 90, 90, 0.12);

  /* ── Typography scale ──
     Bump global +1px. Headings (Bebas Neue hardcodeados) no cambian.
  */
  --fs-micro:  12px;   /* era 11px — badges, stat labels, role tags */
  --fs-label:  13px;   /* era 12px — form labels, filter buttons, nav links, eyebrows */
  --fs-body:   14px;   /* era 13px — descriptions, mechanic text, bio, role lists */
  --fs-ui:     15px;   /* era 14px — card names, inputs, feed names */
  --fs-ui-lg:  17px;   /* era 16px — feed name large */
}