/* ===========================================================
   Soozy Pooch — Brand foundation (design tokens)
   Approved 2026-06-18. Every page/component references these.
   Colors sampled directly from the logo pixels.
   =========================================================== */

:root {
  /* --- Brand colors (exact, from logo) --- */
  --blue:        #1B9BFF;   /* primary */
  --blue-dark:   #1478CC;   /* links, hover, text-on-light */
  --blue-deep:   #1369B5;   /* small labels/eyebrows (AA on tinted bg) */
  --orange:      #FF9400;   /* buttons / primary CTA */
  --orange-dark: #E07E00;   /* button hover */
  --yellow:      #FFD004;   /* accent only — badges, small highlights */

  /* --- Neutrals --- */
  --ink:      #1F2A37;      /* headings + body text */
  --ink-soft: #5B6675;      /* secondary text, captions */
  --line:     #E3E8EF;      /* borders, dividers */
  --bg:       #FFFFFF;      /* page background */
  --bg-soft:  #F4F9FF;      /* tinted section backgrounds */

  /* --- Typography --- */
  --font-heading: "Poppins", system-ui, -apple-system, sans-serif;
  --font-body:    "Nunito Sans", system-ui, -apple-system, sans-serif;

  --fw-body:    400;
  --fw-semibold:600;
  --fw-bold:    700;

  /* fluid type scale */
  --fs-h1:   clamp(2rem, 5vw, 3rem);
  --fs-h2:   clamp(1.5rem, 3.5vw, 2.125rem);
  --fs-h3:   1.25rem;
  --fs-body: 1rem;
  --fs-sm:   0.875rem;
  --lh-body: 1.7;
  --lh-head: 1.15;

  /* --- Spacing (4px base scale) --- */
  --s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-6: 1.5rem;  --s-8: 2rem;   --s-12: 3rem;  --s-16: 4rem;

  /* --- Sizing --- */
  --radius:      12px;
  --radius-pill: 999px;
  --maxw:        1100px;   /* content container max width */
}