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

   THE ONE RULE: nothing here is a neutral gray. Every surface, border and muted
   text value carries a faint warm (red/maroon) cast. That warmth is the brand's
   signature — swapping in a neutral gray ramp kills it instantly. */

:root {
  /* ---- Brand primary (warm red) — the single hero color of the brand ---- */
  --primary-50:  #FFF0F0;
  --primary-100: #FFD6D6;
  --primary-200: #FFADAD;
  --primary-300: #FF7F7F;
  --primary-400: #FF4C4C;
  --primary-500: #B40101;   /* core brand red — buttons, links, logo mark, eyebrows */
  --primary-600: #8C0101;   /* hover */
  --primary-700: #660000;   /* active / deep accents */
  --primary-800: #440000;
  --primary-900: #240000;

  /* ---- Accent (brighter red used for headings & highlights) ---- */
  --accent-100: #FFEAEA;
  --accent-200: #FFC5C5;
  --accent-300: #F28888;
  --accent-400: #F74D4D;
  --accent-500: #C93030;  /* hero headline red */
  --accent-600: #A62222;

  /* Stat red — LARGE NUMERIC STATS ONLY (48px+ figures in the stat row).
     Never a button, never a link, never body copy. */
  --stat-red: #C21B1B;

  /* ---- Neutrals (chrome only — prefer the warm ramps below for surfaces) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-150: #F3F3F3;
  --neutral-200: #E5E5E5;
  --neutral-300: #D4D4D4;
  --neutral-400: #A3A3A3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-black: #000000;

  /* =========================================================
     WARM SURFACES — the tinted grounds sections actually sit on
     ========================================================= */
  --surface-white:   #FFFFFF;  /* default */
  --surface-warm-1:  #FBF9F9;  /* alt section background, mockup insets */
  --surface-warm-2:  #F8F3F3;  /* empty calendar cell */
  --surface-warm-3:  #F7F5F5;  /* FAQ section */
  --surface-warm-4:  #F7F2F2;  /* input fill inside mockups */
  --surface-blush:   #FBF1F0;  /* value cards, mega-menu CTA strip */
  --surface-pink-50: #FFF0F0;  /* icon chip ground */
  --surface-pink-100:#FFF3F2;  /* hover state, calendar "today" highlight */

  /* =========================================================
     WARM BORDERS — three hairlines, not eight
     RULE: every card gets a 1px border AND a shadow. Not one or the other.
     The border does the definition, the shadow does the lift.
     ========================================================= */
  --border-hair:  #F4EEEE;             /* internal dividers inside mockups */
  --border-soft:  #F0E6E6;             /* mockup card outlines */
  --border-card:  #EFE7E7;             /* full-size card outlines */
  --border-brand: rgba(180,1,1,0.12);  /* on blush / tinted grounds */

  /* =========================================================
     WARM INK RAMP — eight steps, and all eight earn their place.
     A 280px mockup needs 3–4 muted values at 8–12px type to build
     hierarchy, and neutral grays look dead against pink stages.
     ========================================================= */
  --ink:         #1A0909;  /* headings, primary */
  --ink-2:       #3D3030;  /* large body on light */
  --ink-3:       #5C5252;  /* body */
  --ink-4:       #6B5F5F;  /* small body, descriptions */
  --ink-muted:   #7C7070;  /* the workhorse — all supporting paragraphs */
  --ink-faint:   #9A8E8E;  /* timestamps, metadata */
  --ink-fainter: #A89C9C;  /* mockup labels, inactive tabs */
  --ink-ghost:   #C2B6B6;  /* weekday letters, placeholder glyphs */
  --ink-skeleton:#EDE6E6;  /* the gray bars that stand in for body copy */

  /* =========================================================
     CONFIRM / SUCCESS — a core product-state pair, not an alert color.
     Green appears ONLY to tell the agent something is already handled:
     "Scheduled", "Approved", a completion check. Never a CTA. Never a link.
     ========================================================= */
  --confirm-text:   #1B8A4B;
  --confirm-bg:     #E7F6EC;
  --confirm-alt:    #1E9E54;  /* on white — checkmark circles */
  --confirm-alt-bg: #EAF7EF;

  /* ---- Remaining status colors (rare) ---- */
  --success: var(--confirm-text);
  --warning: #F2994A;
  --error:   #EB5757;
  --info:    #2D9CDB;

  /* =========================================================
     DARK SURFACES — three deliberate steps down, never one flat black
     ========================================================= */
  --dark-panel:  #1A0909;  /* dark feature panel, pro pricing card, final CTA */
  --dark-footer: #120606;  /* footer sits below the CTA and goes darker */
  --dark-media:  #140707;  /* video frame ground */
  --dark-border: #2A1414;

  /* =========================================================
     POST-TYPE PASTELS — categorical content coding in calendars.
     Lightness-matched so no single type dominates a filled month.
     ========================================================= */
  --post-pink:   #F5B4B4;
  --post-blue:   #AEC9F2;
  --post-green:  #A9DFBE;
  --post-purple: #CBB0EC;

  /* =========================================================
     PLATFORM BRAND COLORS — the ONE documented exception to the
     single-red rule. Platform marks keep their own identity;
     everything else on the page stays in brand.
     ========================================================= */
  --brand-facebook:  #1877F2;
  --brand-linkedin:  #0A66C2;
  --brand-x:         #0F1419;
  --brand-youtube:   #FF0000;
  --brand-pinterest: #E60023;
  --brand-tiktok:    #010101;
  --brand-whatsapp:  #25D366;
  --brand-instagram: linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF); /* @kind other */

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

  /* Text */
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-muted);
  --text-tertiary:  var(--ink-faint);
  --text-on-brand:  var(--surface-white);
  --text-brand:     var(--primary-500);
  --text-heading-accent: var(--accent-500);

  /* Surfaces */
  --surface-page:    var(--surface-white);
  --surface-canvas:  var(--surface-warm-1);
  --surface-card:    var(--surface-white);
  --surface-subtle:  var(--surface-warm-1);
  --surface-tint:    var(--surface-pink-50);
  --surface-brand:   var(--primary-500);
  --surface-inverse: var(--dark-panel);

  /* Borders & dividers */
  --border-default: var(--border-card);
  --border-strong:  var(--neutral-black);  /* crisp black outline: secondary buttons / inputs */
  --border-tint:    var(--border-brand);
  --divider:        var(--border-hair);

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

  /* Canonical social proof figure — use the token, never a hard-coded string.
     (Resolves the old "1000+" vs "2,500+" split in favour of what shipped.) */
  --proof-agent-count: "2,500+"; /* @kind other */
}