/* ============================================================
   CLARE — COLOR TOKENS
   Three brand colors. Coherencia antes que variedad.
   Amarillo identifies, Negro cálido anchors, Blanco roto breathes.
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --clare-amarillo:      #FDB514;  /* Identidad — acento principal */
  --clare-amarillo-dark: #C48C00;  /* Amarillo sobre fondo claro / hover */
  --clare-negro:         #1C1A17;  /* Negro cálido — estructura, tipografía */
  --clare-blanco:        #FAF8F4;  /* Blanco roto — superficie base */

  /* ---- Warm Neutral Ramp (manual v01 — blanco roto → negro cálido) ---- */
  --warm-50:  #FAF8F4;
  --warm-100: #EEEBE7;
  --warm-200: #DDD9D3;
  --warm-300: #CCCCCC;
  --warm-400: #ABABAB;
  --warm-500: #8A8A8A;
  --warm-600: #6B6B6B;
  --warm-700: #4D4D4D;
  --warm-800: #333333;
  --warm-900: #1C1A17;
  --warm-950: #1C1A17;  /* alias of 900 — ramp ends at negro cálido */

  /* ---- Amarillo tints (sparingly — washes / fills) ---- */
  --amarillo-tint-12: rgba(253, 181, 20, 0.12);
  --amarillo-tint-20: rgba(253, 181, 20, 0.20);

  /* ---- Semantic — on light surface (blanco roto base) ---- */
  --bg:            var(--clare-blanco);
  --surface:       #FFFFFF;
  --surface-sunk:  #F1EDE6;
  --text-strong:   #1C1A17;
  --text-body:     rgba(28, 26, 23, 0.82);
  --text-muted:    rgba(28, 26, 23, 0.52);
  --text-subtle:   rgba(28, 26, 23, 0.38);
  --line:          rgba(28, 26, 23, 0.10);
  --line-strong:   rgba(28, 26, 23, 0.20);
  --accent:        var(--clare-amarillo);
  --accent-ink:    var(--clare-negro);   /* text/icon that sits ON amarillo */
  --accent-hover:  var(--clare-amarillo-dark);

  /* ---- Functional (kept warm/quiet — Clare avoids loud alerts) ---- */
  --positive: #3F7D52;
  --caution:  #C48C00;
  --critical: #B23A49;
  --info:     #446B7E;
}

/* ---- Theme: Negro cálido (dark immersion) ---- */
.clare-theme-negro {
  --bg:           #1C1A17;
  --surface:      #2A2723;
  --surface-sunk: #16140F;
  --text-strong:  #FAF8F4;
  --text-body:    rgba(250, 248, 244, 0.82);
  --text-muted:   rgba(250, 248, 244, 0.50);
  --text-subtle:  rgba(250, 248, 244, 0.35);
  --line:         rgba(250, 248, 244, 0.12);
  --line-strong:  rgba(250, 248, 244, 0.24);
  --accent:       var(--clare-amarillo);
  --accent-ink:   var(--clare-negro);
  --accent-hover: #FFC53D;
}

/* ---- Theme: Amarillo (full-bleed brand block) ---- */
.clare-theme-amarillo {
  --bg:           #FDB514;
  --surface:      #FDB514;
  --surface-sunk: #E7A40C;
  --text-strong:  #1C1A17;
  --text-body:    rgba(28, 26, 23, 0.85);
  --text-muted:   rgba(28, 26, 23, 0.58);
  --text-subtle:  rgba(28, 26, 23, 0.42);
  --line:         rgba(28, 26, 23, 0.18);
  --line-strong:  rgba(28, 26, 23, 0.32);
  --accent:       var(--clare-negro);
  --accent-ink:   var(--clare-amarillo);
  --accent-hover: #000000;
}