@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

/* ============================================================
   HeelerPoint — Color & Type Foundations
   A dog lifestyle & storytelling brand.
   Muted heeler blue (trust, intelligence, the outdoors) +
   vibrant adventure orange (energy, joy, partnership).
   Load Google Fonts before this file:
   <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ---- Brand core: blue (Han, the blue heeler) ---- */
  --hp-navy-900: #14213d;   /* deep ink navy — outlines, dark surfaces, primary text */
  --hp-navy-800: #1d2f52;
  --hp-blue-700: #2f5680;
  --hp-blue-600: #3d6fa0;   /* heeler blue — primary brand blue */
  --hp-blue-500: #5688b5;
  --hp-blue-400: #7ba7cd;
  --hp-blue-300: #9cc2e2;   /* sky — badge background tone */
  --hp-blue-200: #c4dcef;
  --hp-blue-100: #e4f0f9;   /* mist — tints, hovers */
  --hp-blue-050: #f1f7fc;

  /* ---- Brand accent: orange (Carly, the pointer) ---- */
  --hp-rust-700:   #a8390c;  /* burnt rust — deepest accent */
  --hp-orange-600: #d9650a;  /* pressed / deep */
  --hp-orange-500: #f2901a;  /* adventure orange — primary accent */
  --hp-orange-400: #fba63a;
  --hp-orange-300: #fcc06a;
  --hp-gold-400:   #f6c544;  /* gold highlight (wordmark sheen) */
  --hp-gold-200:   #fbe6a8;

  /* ---- Warm neutrals (paper, fur, trail) ---- */
  --hp-cream-100: #fbf5ea;  /* warm paper — default page background */
  --hp-cream-200: #f3ead8;
  --hp-sand-300:  #e7dcc6;
  --hp-stone-400: #c9bda8;
  --hp-ink-600:   #5c5648;  /* warm muted body text on cream */
  --hp-ink-500:   #7a7361;

  /* ---- Slate ink (from the media kit: softer than navy for headings) ---- */
  --hp-slate-700: #2f2e3d;
  --hp-slate-600: #454556;  /* primary heading ink on light/airy layouts */
  --hp-slate-500: #606080;  /* secondary slate text */
  --hp-bg-wash: linear-gradient(135deg, #cde2e8 0%, #e3eee8 55%, #f6f4e5 100%); /* soft sky→cream backdrop */

  /* ---- Neutral grays (cool, for UI chrome) ---- */
  --hp-white:    #ffffff;
  --hp-gray-50:  #f7f8fa;
  --hp-gray-100: #eef1f5;
  --hp-gray-200: #dde3ea;
  --hp-gray-300: #c3ccd6;
  --hp-gray-500: #8b96a4;
  --hp-gray-700: #4a5562;
  --hp-gray-900: #1f2832;

  /* ---- Semantic surface & text ---- */
  --hp-bg:          var(--hp-cream-100);
  --hp-bg-elevated: var(--hp-white);
  --hp-bg-sunken:   var(--hp-cream-200);
  --hp-fg:          var(--hp-navy-900);
  --hp-fg-muted:    var(--hp-gray-700);
  --hp-fg-subtle:   var(--hp-gray-500);
  --hp-fg-on-dark:  #eef4fb;
  --hp-border:      #e4ddcf;            /* warm hairline on cream */
  --hp-border-cool: var(--hp-gray-200);  /* cool hairline on white */

  /* ---- Semantic roles ---- */
  --hp-orange-wordmark: #f07010; /* the logo/wordmark orange — primary action color */
  --hp-primary:        var(--hp-blue-600);   /* trust / brand */
  --hp-primary-hover:  var(--hp-blue-700);
  --hp-accent:         #f07010;  /* action / energy — matches the wordmark */
  --hp-accent-hover:   #d9610a;
  --hp-link:           var(--hp-blue-700);
  --hp-focus-ring:     #f2901a66;

  /* ---- Status ---- */
  --hp-success: #4f8a4d;
  --hp-warning: var(--hp-gold-400);
  --hp-danger:  #c0431f;

  /* ---- Typography families ---- */
  --hp-font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --hp-font-body: "Nunito Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---- Type scale (1.25 major-third-ish, tuned) ---- */
  --hp-text-xs:   0.75rem;   /* 12 */
  --hp-text-sm:   0.875rem;  /* 14 */
  --hp-text-base: 1rem;      /* 16 */
  --hp-text-lg:   1.125rem;  /* 18 */
  --hp-text-xl:   1.375rem;  /* 22 */
  --hp-text-2xl:  1.75rem;   /* 28 */
  --hp-text-3xl:  2.25rem;   /* 36 */
  --hp-text-4xl:  3rem;      /* 48 */
  --hp-text-5xl:  3.875rem;  /* 62 */
  --hp-text-6xl:  5rem;      /* 80 */

  --hp-leading-tight: 1.08;
  --hp-leading-snug:  1.25;
  --hp-leading-body:  1.6;

  /* ---- Radii (soft, rounded — echoes the badge & wordmark) ---- */
  --hp-radius-sm:   8px;
  --hp-radius-md:   14px;
  --hp-radius-lg:   20px;
  --hp-radius-xl:   28px;
  --hp-radius-pill: 999px;

  /* ---- Spacing ---- */
  --hp-space-1: 4px;
  --hp-space-2: 8px;
  --hp-space-3: 12px;
  --hp-space-4: 16px;
  --hp-space-5: 24px;
  --hp-space-6: 32px;
  --hp-space-7: 48px;
  --hp-space-8: 64px;
  --hp-space-9: 96px;

  /* ---- Shadows (soft, warm-tinted; never harsh) ---- */
  --hp-shadow-sm: 0 1px 2px rgba(20, 33, 61, 0.06), 0 1px 3px rgba(20, 33, 61, 0.08);
  --hp-shadow-md: 0 4px 10px rgba(20, 33, 61, 0.08), 0 2px 4px rgba(20, 33, 61, 0.06);
  --hp-shadow-lg: 0 14px 34px rgba(20, 33, 61, 0.12), 0 4px 10px rgba(20, 33, 61, 0.07);
  --hp-shadow-orange: 0 8px 20px rgba(217, 101, 10, 0.28);
  --hp-shadow-blue:   0 8px 20px rgba(45, 86, 128, 0.22);
}

/* ============================================================
   Base element styles
   ============================================================ */
.hp-scope, body.hp-scope {
  font-family: var(--hp-font-body);
  font-size: var(--hp-text-base);
  line-height: var(--hp-leading-body);
  color: var(--hp-fg);
  background: var(--hp-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hp-display {
  font-family: var(--hp-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--hp-leading-tight);
  color: var(--hp-navy-900);
}

.hp-h1 { font-family: var(--hp-font-display); font-weight: 700; font-size: var(--hp-text-5xl); line-height: var(--hp-leading-tight); letter-spacing: -0.02em; color: var(--hp-navy-900); }
.hp-h2 { font-family: var(--hp-font-display); font-weight: 600; font-size: var(--hp-text-4xl); line-height: var(--hp-leading-tight); letter-spacing: -0.015em; color: var(--hp-navy-900); }
.hp-h3 { font-family: var(--hp-font-display); font-weight: 600; font-size: var(--hp-text-3xl); line-height: var(--hp-leading-snug); color: var(--hp-navy-900); }
.hp-h4 { font-family: var(--hp-font-display); font-weight: 500; font-size: var(--hp-text-2xl); line-height: var(--hp-leading-snug); color: var(--hp-navy-900); }
.hp-h5 { font-family: var(--hp-font-display); font-weight: 500; font-size: var(--hp-text-xl); line-height: var(--hp-leading-snug); color: var(--hp-navy-900); }

.hp-eyebrow {
  font-family: var(--hp-font-display);
  font-weight: 600;
  font-size: var(--hp-text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-orange-600);
}

.hp-lead { font-family: var(--hp-font-body); font-size: var(--hp-text-xl); line-height: 1.5; color: var(--hp-fg-muted); }
.hp-body { font-family: var(--hp-font-body); font-size: var(--hp-text-base); line-height: var(--hp-leading-body); color: var(--hp-fg); }
.hp-small { font-family: var(--hp-font-body); font-size: var(--hp-text-sm); color: var(--hp-fg-muted); }
.hp-caption { font-family: var(--hp-font-body); font-size: var(--hp-text-xs); letter-spacing: 0.02em; color: var(--hp-fg-subtle); }

a { color: var(--hp-link); }