/* Solar Pool Services — Color tokens
 * Palette derived directly from the hand-drawn brand logo (a vermilion sun
 * rising behind a swimmer in teal water, outlined in indigo, yellow cap) and
 * from real SoCal installation photography (blue pools, warm stucco, black mats).
 */
:root {
  /* ── Sun (primary brand) — the vermilion of the logo sun ───────────── */
  --sun-900: #7A2410;
  --sun-800: #A6321A;
  --sun-700: #C43C1E;
  --sun-600: #DC4620; /* PRIMARY brand color */
  --sun-500: #E85A2A;
  --sun-400: #F27B45;
  --sun-300: #F8A277;
  --sun-200: #FBC9AE;
  --sun-100: #FCE4D6;
  --sun-50:  #FDF1EA;

  /* ── Pool (secondary) — the teal water of the logo & real pools ──────── */
  --pool-900: #0F4753;
  --pool-800: #165A69;
  --pool-700: #1E6E7E;
  --pool-600: #268394;
  --pool-500: #2E93A3;
  --pool-400: #57ADB8;
  --pool-300: #8ACBCB; /* aqua highlight */
  --pool-200: #BCE2E0;
  --pool-100: #DEF1EF;
  --pool-50:  #EFF8F7;

  /* ── Indigo (accent) — the wave outline in the logo ──────────────────── */
  --indigo-700: #38316F;
  --indigo-600: #453B8C;
  --indigo-500: #574BA6;
  --indigo-300: #9A91CB;
  --indigo-100: #E4E1F1;

  /* ── Gold (highlight) — the swimmer's cap; sparing use ───────────────── */
  --gold-500: #E8AE13;
  --gold-400: #F4C025;
  --gold-200: #FBE49A;
  --gold-100: #FDF3D2;

  /* ── Warm neutrals — SoCal stucco & sand ─────────────────────────────── */
  --ink-900: #1E1A14; /* warm near-black — primary text */
  --ink-800: #2E281F;
  --ink-700: #423B30;
  --ink-600: #5C5344;
  --ink-500: #746A59;
  --ink-400: #9A8F7C;
  --ink-300: #C0B6A3;
  --sand-200: #E6DCCB;
  --sand-100: #F1EADC;
  --sand-50:  #FAF6EE;
  --white:    #FFFFFF;

  /* ── Semantic status ─────────────────────────────────────────────────── */
  --success-600: #2E7D52;
  --success-100: #DCEEE3;
  --warning-600: #C08A0E;
  --warning-100: #FBEFCF;
  --danger-600:  #C0402A;
  --danger-100:  #F7E0D9;

  /* ═══ Semantic aliases — reference these in components ════════════════ */
  --brand:            var(--sun-600);
  --brand-hover:      var(--sun-700);
  --brand-active:     var(--sun-800);
  --brand-soft:       var(--sun-100);
  --brand-on:         var(--white);

  --accent:           var(--pool-600);
  --accent-hover:     var(--pool-700);
  --accent-soft:      var(--pool-100);
  --accent-on:        var(--white);

  --text-strong:      var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-500);
  --text-faint:       var(--ink-400);
  --text-on-brand:    var(--white);
  --text-link:        var(--pool-700);
  --text-link-hover:  var(--sun-600);

  --surface-page:     var(--sand-50);
  --surface-card:     var(--white);
  --surface-sunk:     var(--sand-100);
  --surface-invert:   var(--ink-900);
  --surface-brand:    var(--sun-600);
  --surface-accent:   var(--pool-700);

  --border-subtle:    var(--sand-200);
  --border-default:   #DED3C0;
  --border-strong:    var(--ink-300);
  --border-focus:     var(--pool-500);
}