/* ─── MR.HOMES — Color Tokens ─────────────────────────────────────────── */

:root {
  /* ── Brand palette (strict — no other hues allowed) ── */
  --color-black:      #1A1A1A;   /* Negro carbón */
  --color-white:      #FFFFFF;   /* Blanco puro  */
  --color-red:        #e30613;   /* Rojo acento  */
  --color-red-dark:   #b80510;   /* Hover / pressed */
  --color-red-light:  #f01e2c;   /* Lighter state  */

  /* ── Neutrals (derived from black) ── */
  --color-gray-50:    #F7F7F7;
  --color-gray-100:   #F0F0F0;
  --color-gray-200:   #E4E4E4;
  --color-gray-300:   #CCCCCC;
  --color-gray-400:   #AAAAAA;
  --color-gray-500:   #888888;
  --color-gray-600:   #666666;
  --color-gray-700:   #444444;
  --color-gray-800:   #2E2E2E;
  --color-gray-900:   #1A1A1A;   /* = --color-black */

  /* ── Semantic — foreground ── */
  --fg-primary:       var(--color-black);
  --fg-secondary:     var(--color-gray-600);
  --fg-muted:         var(--color-gray-400);
  --fg-inverse:       var(--color-white);
  --fg-accent:        var(--color-red);
  --fg-on-accent:     var(--color-white);

  /* ── Semantic — background ── */
  --bg-base:          var(--color-white);
  --bg-subtle:        var(--color-gray-50);
  --bg-muted:         var(--color-gray-100);
  --bg-inverse:       var(--color-black);
  --bg-accent:        var(--color-red);

  /* ── Semantic — border ── */
  --border-strong:    var(--color-black);
  --border-default:   var(--color-gray-200);
  --border-subtle:    var(--color-gray-100);
  --border-accent:    var(--color-red);
  --border-inverse:   var(--color-white);
}