/* RealEstateContent.ai — Color system
   Primitives live in fig-tokens.css (generated from Figma Variables).
   This file adds rgb-channel helpers and the SEMANTIC layer the brand designs against. */

:root {
  /* ---- Brand primary (warm red) — the single hero color of the brand ---- */
  --primary-50:  rgb(255, 240, 240);
  --primary-100: rgb(255, 214, 214);
  --primary-200: rgb(255, 173, 173);
  --primary-300: rgb(255, 127, 127);
  --primary-400: rgb(255, 76, 76);
  --primary-500: rgb(178, 1, 1);   /* core brand red — buttons, links, logo mark */
  --primary-600: rgb(140, 1, 1);   /* hover */
  --primary-700: rgb(102, 0, 0);   /* active / deep accents */
  --primary-800: rgb(68, 0, 0);
  --primary-900: rgb(36, 0, 0);

  /* ---- Accent (brighter red used for headings & highlights) ---- */
  --accent-100: rgb(255, 234, 234);
  --accent-200: rgb(255, 197, 197);
  --accent-300: rgb(242, 136, 136);
  --accent-400: rgb(247, 77, 77);
  --accent-500: rgb(201, 48, 48);  /* hero headline red */
  --accent-600: rgb(166, 34, 34);

  /* ---- Neutrals ---- */
  --neutral-0:   rgb(255, 255, 255);
  --neutral-50:  rgb(250, 250, 250);
  --neutral-100: rgb(245, 245, 245);
  --neutral-150: rgb(243, 243, 243); /* page canvas behind cards */
  --neutral-200: rgb(229, 229, 229);
  --neutral-300: rgb(212, 212, 212);
  --neutral-400: rgb(163, 163, 163);
  --neutral-500: rgb(115, 115, 115);
  --neutral-600: rgb(82, 82, 82);
  --neutral-700: rgb(64, 64, 64);
  --neutral-800: rgb(38, 38, 38);
  --neutral-900: rgb(23, 23, 23);
  --neutral-black: rgb(0, 0, 0);

  /* Ink — the brand's near-black text color carries a faint warm (maroon) cast */
  --ink: rgb(26, 9, 9);

  /* ---- Semantic status ---- */
  --success: rgb(39, 174, 96);
  --warning: rgb(242, 153, 74);
  --error:   rgb(235, 87, 87);
  --info:    rgb(45, 156, 219);

  /* =========================================================
     SEMANTIC ALIASES — design against these, not the scales
     ========================================================= */

  /* Text */
  --text-primary:   var(--ink);            /* headings & body */
  --text-secondary: rgb(118, 118, 118);    /* supporting copy / muted */
  --text-tertiary:  var(--neutral-400);    /* placeholders, captions */
  --text-on-brand:  var(--neutral-0);      /* text on red surfaces */
  --text-brand:     var(--primary-500);    /* links, brand emphasis */
  --text-heading-accent: var(--accent-500);/* the red used on big headlines */

  /* Surfaces */
  --surface-page:   var(--neutral-0);      /* default white page */
  --surface-canvas: var(--neutral-150);    /* gray behind floating cards */
  --surface-card:   var(--neutral-0);      /* card background */
  --surface-subtle: var(--neutral-50);     /* subtle filled blocks */
  --surface-tint:   var(--primary-50);     /* soft red wash / feature blocks */
  --surface-brand:  var(--primary-500);    /* solid red surface */
  --surface-inverse: var(--ink);           /* near-black surfaces (dark CTA bar) */

  /* Borders & dividers */
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-black);  /* the crisp 1px black outline on secondary buttons / inputs */
  --border-tint:    var(--primary-100);
  --divider:        var(--neutral-200);

  /* Interactive */
  --action-primary:        var(--primary-500);
  --action-primary-hover:  var(--primary-600);
  --action-primary-active: var(--primary-700);
  --focus-ring:            var(--primary-300);
}