/* poolHints — colors & type tokens
 * --------------------------------------------------------------------------
 * Sampled from the only provided asset: the square logo on a blue bg.
 *   - brand blue: rgb(10,114,185) → #0A72B9
 *   - white droplet & wordmark over blue
 * The secondary palette uses the warm orange the user suggested (#FF8C42),
 * with #F6AD55 retained as the lighter "warm" companion.
 *
 * Typography is a SUBSTITUTION (flagged in README): the wordmark and pH glyph
 * are a rounded geometric sans. The closest free families are Quicksand
 * (display/wordmark feel) and Nunito (richer weight ladder for UI/body).
 * Both load from Google Fonts in the consuming HTML; this file only declares
 * the variables.
 * --------------------------------------------------------------------------
 */

:root {
  /* ────────────────────────────────────────────────────────────────────
   * COLOR — Primary (pool blue)
   * 500 is the brand value. Tints/shades step in OKLCH for even contrast.
   * ──────────────────────────────────────────────────────────────────── */
  --ph-blue-50:  #E6F2FA;
  --ph-blue-100: #C5E0F2;
  --ph-blue-200: #95C8E7;
  --ph-blue-300: #5DADDA;
  --ph-blue-400: #2E92CC;
  --ph-blue-500: #0A72B9;   /* brand */
  --ph-blue-600: #085E97;
  --ph-blue-700: #064A77;
  --ph-blue-800: #053857;
  --ph-blue-900: #03263B;

  /* ────────────────────────────────────────────────────────────────────
   * COLOR — Secondary (sun / warm)
   * ──────────────────────────────────────────────────────────────────── */
  --ph-sun-50:  #FFF3E8;
  --ph-sun-100: #FFE0C2;
  --ph-sun-200: #FFC798;
  --ph-sun-300: #FFB07A;    /* peach */
  --ph-sun-400: #F6AD55;    /* alt warm (per user) */
  --ph-sun-500: #FF8C42;    /* secondary brand (per user) */
  --ph-sun-600: #E66E22;
  --ph-sun-700: #B5530E;
  --ph-sun-800: #803900;

  /* ────────────────────────────────────────────────────────────────────
   * COLOR — Tertiary (splash / aqua) — mid-tone blues for chips and tags
   * ──────────────────────────────────────────────────────────────────── */
  --ph-aqua-100: #D6F0F7;
  --ph-aqua-300: #7CD3E8;
  --ph-aqua-500: #2BB8D6;
  --ph-aqua-700: #16798F;

  /* ────────────────────────────────────────────────────────────────────
   * COLOR — Neutrals (cool slate w/ a hint of blue, to feel like water)
   * ──────────────────────────────────────────────────────────────────── */
  --ph-white:    #FFFFFF;
  --ph-slate-50:  #F4F8FB;
  --ph-slate-100: #E8EFF5;
  --ph-slate-200: #CFDAE4;
  --ph-slate-300: #A8B7C4;
  --ph-slate-400: #7B8B99;
  --ph-slate-500: #5C6B79;
  --ph-slate-600: #43525F;
  --ph-slate-700: #2F3A47;
  --ph-slate-800: #1B232D;
  --ph-slate-900: #0E1620;

  /* ────────────────────────────────────────────────────────────────────
   * COLOR — Semantic (used for water-status indicators)
   * ──────────────────────────────────────────────────────────────────── */
  --ph-good-50:    #E5F6EC;
  --ph-good-500:   #1F9D55;     /* "balanced" / safe to swim */
  --ph-good-700:   #136B3A;
  --ph-warn-50:    #FFF6E0;
  --ph-warn-500:   #F4B53A;     /* "watch this" — slight imbalance */
  --ph-warn-700:   #8A6206;
  --ph-alert-50:   #FCE9E5;
  --ph-alert-500:  #E04E3B;     /* "do not swim" / algae / out of range */
  --ph-alert-700:  #921F11;

  /* ────────────────────────────────────────────────────────────────────
   * COLOR — Semantic role tokens (for prose/UI to consume)
   * ──────────────────────────────────────────────────────────────────── */
  --color-bg:           var(--ph-slate-50);
  --color-bg-elevated:  var(--ph-white);
  --color-bg-inverse:   var(--ph-blue-700);
  --color-bg-brand:     var(--ph-blue-500);

  --color-fg-1:         var(--ph-slate-900);   /* primary text  */
  --color-fg-2:         var(--ph-slate-600);   /* secondary text */
  --color-fg-3:         var(--ph-slate-400);   /* tertiary / hints */
  --color-fg-on-brand:  var(--ph-white);
  --color-fg-link:      var(--ph-blue-600);
  --color-fg-link-hover:var(--ph-blue-700);

  --color-border:       var(--ph-slate-200);
  --color-border-strong:var(--ph-slate-300);
  --color-border-brand: var(--ph-blue-500);

  --color-accent:       var(--ph-sun-500);
  --color-accent-soft:  var(--ph-sun-100);

  /* ────────────────────────────────────────────────────────────────────
   * TYPE — Families
   * Quicksand carries the wordmark/display feel.
   * Nunito covers UI and body — a similar rounded sans with more weights.
   * JetBrains Mono is used for chemistry readings and code.
   * ──────────────────────────────────────────────────────────────────── */
  --font-display: "Quicksand", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Nunito",    "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ────────────────────────────────────────────────────────────────────
   * TYPE — Weights (Nunito + Quicksand share these)
   * ──────────────────────────────────────────────────────────────────── */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   800;

  /* ────────────────────────────────────────────────────────────────────
   * TYPE — Scale (modular ~1.18, snapped to integers)
   * ──────────────────────────────────────────────────────────────────── */
  --fs-12: 0.75rem;    /* caption */
  --fs-13: 0.8125rem;  /* small */
  --fs-14: 0.875rem;
  --fs-16: 1rem;       /* body */
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;    /* h5  */
  --fs-22: 1.375rem;
  --fs-26: 1.625rem;   /* h4  */
  --fs-30: 1.875rem;   /* h3  */
  --fs-36: 2.25rem;    /* h2  */
  --fs-44: 2.75rem;    /* h1  */
  --fs-56: 3.5rem;     /* hero */
  --fs-72: 4.5rem;     /* mega */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-allcaps: 0.08em;

  /* ────────────────────────────────────────────────────────────────────
   * SPACING — 4px base
   * ──────────────────────────────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ────────────────────────────────────────────────────────────────────
   * RADIUS — generous, ripple-y curves (matches the rounded wordmark)
   * ──────────────────────────────────────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ────────────────────────────────────────────────────────────────────
   * SHADOWS — soft, low-tint blue (light through water)
   * ──────────────────────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(10, 60, 100, 0.06);
  --shadow-sm:  0 2px 6px rgba(10, 60, 100, 0.08);
  --shadow-md:  0 8px 18px rgba(10, 60, 100, 0.10);
  --shadow-lg:  0 18px 40px rgba(10, 60, 100, 0.14);
  --shadow-brand: 0 14px 36px rgba(10, 114, 185, 0.30);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ────────────────────────────────────────────────────────────────────
   * MOTION
   * ──────────────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 0.84, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle bounce */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;
}

/* ──────────────────────────────────────────────────────────────────────
 * SEMANTIC CLASSES — drop-in for prototypes
 * ────────────────────────────────────────────────────────────────────── */
.ph-h1, h1.ph {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size:   var(--fs-44);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg-1);
}
.ph-h2, h2.ph {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size:   var(--fs-36);
  line-height: var(--lh-tight);
  color: var(--color-fg-1);
}
.ph-h3, h3.ph {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size:   var(--fs-26);
  line-height: var(--lh-snug);
  color: var(--color-fg-1);
}
.ph-h4, h4.ph {
  font-family: var(--font-body);
  font-weight: var(--w-semi);
  font-size:   var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--color-fg-1);
}
.ph-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  font-size:   var(--fs-12);
  letter-spacing: var(--ls-allcaps);
  text-transform: uppercase;
  color: var(--ph-blue-600);
}
.ph-body, p.ph {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size:   var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--color-fg-1);
}
.ph-small {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size:   var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--color-fg-2);
}
.ph-caption {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size:   var(--fs-12);
  color: var(--color-fg-3);
}
.ph-mono, code.ph, .ph-reading {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-size:   var(--fs-14);
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.ph-reading-big {
  font-family: var(--font-mono);
  font-weight: var(--w-semi);
  font-size:   var(--fs-56);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
  color: var(--color-fg-1);
}