/* 831 Pool & Spa — Color tokens
   Derived directly from the brand logo: deep navy ring, ocean-blue wordmark,
   bright aqua waves, and a warm sun-gold. Clean & crisp: white surfaces,
   navy ink, aqua + sun accents used sparingly. */
:root {
  /* ---- Base palette ---- */
  /* Navy — the logo ring & primary brand ink */
  --navy-900: #142744;
  --navy-800: #1a3054;
  --navy-700: #203060; /* primary brand navy (sampled from logo) */
  --navy-600: #2a3f70;

  /* Ocean — the "831" wordmark & secondary blue */
  --ocean-600: #245c8a;
  --ocean-500: #2e6ea6; /* sampled from logo text */
  --ocean-400: #4b88bd;

  /* Aqua — bright wave highlight / interactive accent */
  --aqua-600: #1373c0;
  --aqua-500: #1aa2dc;
  --aqua-400: #35b6e6; /* sampled from logo waves */
  --aqua-300: #7fd0ef;
  --aqua-100: #dff3fb;

  /* Sun — warm gold accent (the logo sun) */
  --sun-600: #e2971f;
  --sun-500: #f8b040; /* sampled from logo sun */
  --sun-300: #fcd489;
  --sun-100: #fef3dc;

  /* Neutrals — cool-tinted grays for a crisp, watery feel */
  --white:    #ffffff;
  --gray-50:  #f5f8fb;
  --gray-100: #eaf0f6;
  --gray-200: #dbe4ee;
  --gray-300: #c2d0de;
  --gray-400: #94a6b8;
  --gray-500: #6b7d90;
  --gray-600: #4c5c6e;
  --gray-700: #33404f;

  /* Semantic status */
  --green-500: #2e9e6b;
  --green-100: #dcf3e8;
  --amber-500: #e2971f;
  --amber-100: #fef3dc;
  --red-500:   #d64545;
  --red-100:   #fbe3e3;

  /* ---- Semantic aliases ---- */
  --brand:            var(--navy-700);
  --brand-secondary:  var(--ocean-500);
  --accent:           var(--aqua-500);
  --accent-warm:      var(--sun-500);

  --text-strong:  var(--navy-900);
  --text-body:    var(--navy-800);
  --text-muted:   var(--gray-500);
  --text-on-dark: var(--white);
  --text-link:    var(--aqua-600);

  --surface-page:  var(--gray-50);
  --surface-card:  var(--white);
  --surface-sunk:  var(--gray-100);
  --surface-brand: var(--navy-700);
  --surface-accent:var(--aqua-100);

  --border-subtle: var(--gray-200);
  --border-default:var(--gray-300);
  --border-strong: var(--navy-700);

  --focus-ring: var(--aqua-400);
}