/* ============================================================
   Brownstone Leasing — Brand Palette (Option C: Wet Paint)
   Single source of truth. Do not hardcode hex anywhere downstream.
   Adopted: 2026-05-13 (BCC38, Drew approval)
   ============================================================ */

:root {
  /* --- Brand core --- */
  --brand-red:           #A83A33;   /* cinnabar — active tabs, page headings, accent moments */
  --brand-red-accent:    #C75A4F;   /* lighter cinnabar — hover states on red elements */
  --brand-navy:          #264A82;   /* royal enamel — nav bar bg, price text, anchor color */
  --brand-cta:           #3F73C0;   /* wet cobalt — primary CTAs, hover/focus rings */
  --brand-cta-hover:     #2F5FA8;   /* slightly darker cobalt for CTA hover */
  --brand-black:         #1A1A1C;   /* soft black — body text, modal section titles */
  --brand-grey:          #5C5C5C;   /* logo grey — PRESERVED from logo asset */
  --brand-stone:         #C9C6C0;   /* warm stone — borders on light surfaces */
  --brand-paper:         #F5F2EC;   /* cream paper — question-page bg, modal header bg */

  /* --- Banners: citrus accent (preppy-heritage harmony) --- */
  --citrus-yellow:       #F4CD3E;   /* lemon — NEW callout banners */
  --citrus-green:        #8DC555;   /* lime — NEW callout banners */
  --citrus-text-on:      #264A82;   /* navy text reads AAA on both citrus colors */

  /* --- Banners: soft (existing peach + green, saturation-bumped for C) --- */
  --banner-peach-bg:     #FBE0C2;   /* was #fff3e6 — +7% sat, -6% lightness */
  --banner-peach-border: #f6b26b;   /* unchanged — already saturated enough */
  --banner-peach-text:   #7a3e00;   /* unchanged */

  --banner-green-bg:     #CFEDC9;   /* was #d4edda — +10% sat, warmer hue */
  --banner-green-border: #B8DEB4;   /* was #c3e6cb — darker so doesn't merge with bg */
  --banner-green-text:   #155724;   /* unchanged */

  /* --- Selection / interaction tints (wet-paint-navy family) --- */
  --row-hover:           #EEF2FA;   /* subtle navy tint, replaces legacy #f5f8ff */
  --row-selected:        #DEE7F4;   /* deeper navy tint, replaces legacy #e8f0fe */

  /* --- Status colors (kept distinct from brand) --- */
  --error-red:           #CC0000;   /* DELIBERATELY distinct from brand cinnabar */
  --success-green:       var(--banner-green-text);  /* alias for semantic clarity */

  /* --- Utility greys (unchanged — work across all palette variants) --- */
  --grey-900: #1A1A1C;   /* same as --brand-black */
  --grey-700: #333333;
  --grey-600: #555555;
  --grey-500: #666666;
  --grey-400: #888888;
  --grey-300: #999999;
  --grey-200: #C9C6C0;   /* same as --brand-stone */
  --grey-150: #DDDDDD;
  --grey-100: #E0E0E0;
  --grey-80:  #EEEEEE;
  --grey-60:  #F5F5F5;
  --grey-50:  #F7F7F7;
  --grey-40:  #F9F9F9;
  --grey-30:  #FAFAFA;

  /* --- Semantic aliases (use these in component CSS, not raw vars where possible) --- */
  --color-primary:           var(--brand-cta);
  --color-primary-hover:     var(--brand-cta-hover);
  --color-accent:            var(--brand-red);
  --color-anchor:            var(--brand-navy);
  --color-text-body:         var(--brand-black);
  --color-text-secondary:    var(--grey-600);
  --color-text-muted:        var(--grey-400);
  --color-link:              var(--brand-navy);
  --color-link-hover:        var(--brand-cta);
  --color-border-default:    var(--grey-100);
  --color-border-emphasis:   var(--brand-stone);
  --color-bg-page:           var(--brand-paper);
  --color-bg-card:           #FFFFFF;
  --color-bg-modal-header:   var(--brand-paper);
  --color-focus-ring:        var(--brand-cta);
}