/* ============================================================
   COLORS — Johnson Team / CrossCountry Mortgage
   ------------------------------------------------------------
   Sampled directly from the live johnsonteamhomeloans / CCM
   property. Two brand anchors:
     • CCM Green  #488178  — the warm sage/forest used for the
       Johnson Team headers, primary CTAs and links.
     • Warm Ink   #231f20  — near-black used for display type and
       full-bleed dark sections (testimonials, calculators).
   CCM Blue #2f8ae7 is the corporate CrossCountry accent, used
   sparingly for utility/data moments (the calculator CTA, charts).
   ============================================================ */

:root {
  /* ---- Brand green (primary) ---- */
  --green-900: #1f3f39;
  --green-800: #27514a;
  --green-700: #2f5d54;
  --green-600: #3a6f64;
  --green-500: #488178;  /* PRIMARY brand green */
  --green-400: #6b9c93;
  --green-300: #9cbcb5;
  --green-200: #c8dbd6;
  --green-100: #e4ede9;
  --green-050: #f2f7f5;

  /* ---- CCM corporate blue (utility accent) ---- */
  --blue-700: #1761b4;
  --blue-600: #1f72c9;
  --blue-500: #2f8ae7;  /* CCM blue — data / utility CTA */
  --blue-300: #8fc1f0;
  --blue-100: #e3f0fb;

  /* ---- Warm ink / charcoal neutrals ---- */
  --ink-900: #161314;
  --ink-800: #231f20;  /* dark surfaces + display text */
  --ink-700: #35302f;
  --ink-600: #524b4a;
  --ink-500: #6e6766;
  --ink-400: #8d8786;
  --ink-300: #b3adac;
  --ink-200: #d6d2d0;

  /* ---- Paper / surface neutrals (slightly warm) ---- */
  --paper:        #ffffff;
  --surface-50:   #f6f6f6;  /* page-section wash, cards */
  --surface-100:  #efefee;
  --surface-150:  #e7e7e5;
  --border-soft:  #e6e5e3;
  --border:       #d9d8d6;
  --border-strong:#c2c0bd;

  /* ---- Accents ---- */
  --gold-600:   #d98a12;
  --gold-500:   #f5a623;  /* star ratings */
  --gold-100:   #fceccf;
  --orange-500: #e8821e;  /* editorial accent (Year in Review) */
  --orange-100: #fbe6d2;

  /* ---- Status ---- */
  --success-500: #3a8a5f;
  --success-100: #e1f0e8;
  --warning-500: #d98a12;
  --warning-100: #fbeccd;
  --error-500:   #c0392b;
  --error-100:   #f7e0dc;
  --info-500:    #2f8ae7;
  --info-100:    #e3f0fb;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */

  /* Brand */
  --brand:            var(--green-500);
  --brand-hover:      var(--green-600);
  --brand-press:      var(--green-700);
  --brand-subtle:     var(--green-100);
  --brand-on:         #ffffff;

  --brand-blue:       var(--blue-500);
  --brand-blue-hover: var(--blue-600);

  /* Text */
  --text-primary:   var(--ink-800);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-400);
  --text-inverse:   #ffffff;
  --text-on-dark-muted: #b9b4b2;
  --text-brand:     var(--green-600);
  --text-link:      var(--green-600);
  --text-link-hover:var(--green-700);

  /* Surfaces */
  --surface-page:   #ffffff;
  --surface-wash:   var(--surface-50);
  --surface-card:   #ffffff;
  --surface-sunken: var(--surface-50);
  --surface-dark:   var(--ink-800);
  --surface-dark-2: #2e2928;
  --surface-brand:  var(--green-500);

  /* Borders */
  --border-default: var(--border);
  --border-muted:   var(--border-soft);
  --border-on-dark: rgba(255,255,255,0.16);

  /* Lines / ratings / focus */
  --rating:        var(--gold-500);
  --focus-ring:    var(--green-500);
  --focus-ring-blue: var(--blue-500);
  --divider:       var(--border-soft);
  --rule-strong:   var(--ink-800);
}