/* ============================================================
   Villaboix — Color tokens
   Source: Manual de Identidad 2022 (Colorimetría)
   Primary palette: red #CB2538, black #000000, white #FFFFFF,
   off-white #FFFAF6. Tints/shades derived for UI use.
   ============================================================ */
:root {
  /* --- Brand primaries (verbatim from manual) --- */
  --vb-red: #CB2538;            /* CMYK 13/95/74/4 · RGB 203/37/56 */
  --vb-black: #000000;          /* CMYK 100/100/100/100 */
  --vb-white: #FFFFFF;
  --vb-cream: #FFFAF6;          /* CMYK 0/2/4/0 · warm off-white */

  /* --- Red scale (derived from --vb-red) --- */
  --vb-red-50:  #FBEAEC;
  --vb-red-100: #F4C7CC;
  --vb-red-200: #E89098;
  --vb-red-300: #DC5965;
  --vb-red-400: #D33B49;
  --vb-red-500: #CB2538;        /* base */
  --vb-red-600: #A91D2E;
  --vb-red-700: #851623;
  --vb-red-800: #5E1019;
  --vb-red-900: #3A0A10;

  /* --- Neutral / ink scale (warm-tinted greys toward the cream) --- */
  --vb-ink-900: #0A0809;        /* near-black ink */
  --vb-ink-800: #1C1A1B;
  --vb-ink-700: #34302F;
  --vb-ink-600: #514B49;
  --vb-ink-500: #726B68;
  --vb-ink-400: #9A938F;
  --vb-ink-300: #C2BBB6;
  --vb-ink-200: #E2DCD7;
  --vb-ink-100: #EFEAE5;
  --vb-ink-50:  #F8F4F0;

  /* ============================================================
     Semantic aliases — use these in product/UI code
     ============================================================ */
  --color-bg:            var(--vb-cream);
  --color-bg-alt:        var(--vb-white);
  --color-bg-inverse:    var(--vb-black);
  --surface-card:        var(--vb-white);
  --surface-raised:      var(--vb-white);
  --surface-sunken:      var(--vb-ink-50);

  --text-strong:         var(--vb-ink-900);
  --text-body:           var(--vb-ink-800);
  --text-muted:          var(--vb-ink-500);
  --text-faint:          var(--vb-ink-400);
  --text-on-red:         var(--vb-white);
  --text-on-dark:        var(--vb-cream);

  --color-primary:       var(--vb-red-500);
  --color-primary-hover: var(--vb-red-600);
  --color-primary-press: var(--vb-red-700);
  --color-primary-soft:  var(--vb-red-50);

  --border-subtle:       var(--vb-ink-100);
  --border-default:      var(--vb-ink-200);
  --border-strong:       var(--vb-ink-300);
  --border-focus:        var(--vb-red-500);

  /* Status (kept tonally close to the warm palette) */
  --color-success: #2E7D5B;
  --color-warning: #C9842B;
  --color-danger:  var(--vb-red-600);
  --color-info:    #3A5A8C;
}