/* ==========================================================================
   Hawaii King Kennels — Design Tokens
   Single source of truth for every color, font, radius, shadow, spacing
   and timing value used across the site. Never hardcode a raw hex value
   in a component or page — always reference a token from here.
   ========================================================================== */

:root {
  /* ---------- Color: surfaces ---------- */
  --bg-main: #F6F3FF;       /* global page background (soft lavender) */
  --bg-alt: #FBF9FF;        /* alternate section background */
  --surface: #FFFFFF;       /* cards */

  /* ---------- Color: brand ---------- */
  --primary: #7B61E8;       /* royal lavender violet — buttons, links, accents */
  --primary-dark: #5E45CC;  /* hover / active of primary */
  --primary-soft: #ECE7FF;  /* tinted chips, icon circles, badges */
  --heart: #F0568C;         /* hibiscus pink — hearts + tiny love accents ONLY */

  /* ---------- Color: text ---------- */
  --heading: #1F1B3A;       /* deep navy-violet headings */
  --text: #5B5775;          /* body text */
  --muted: #8E8AA8;         /* de-emphasized text */
  --border: #E8E3F8;        /* hairlines, card borders */

  /* ---------- Color: pastel card tints (same order everywhere) ---------- */
  --tint-lavender-start: #F1EDFF;
  --tint-lavender-end: #FFFFFF;
  --tint-sky-start: #E8F3FF;
  --tint-sky-end: #FFFFFF;
  --tint-blush-start: #FFEAF2;
  --tint-blush-deep: #F8C2D3;
  --tint-blush-end: #FFFFFF;
  --tint-butter-start: #FFF4DF;
  --tint-butter-end: #FFFFFF;
  --tint-mint-start: #E4F7EF;
  --tint-mint-end: #FFFFFF;

  --tint-lavender: linear-gradient(160deg, var(--tint-lavender-start) 0%, var(--tint-lavender-end) 100%);
  --tint-sky: linear-gradient(160deg, var(--tint-sky-start) 0%, var(--tint-sky-end) 100%);
  --tint-blush: linear-gradient(160deg, var(--tint-blush-start) 0%, var(--tint-blush-end) 100%);
  --tint-butter: linear-gradient(160deg, var(--tint-butter-start) 0%, var(--tint-butter-end) 100%);
  --tint-mint: linear-gradient(160deg, var(--tint-mint-start) 0%, var(--tint-mint-end) 100%);

  /* ---------- Color: icon accents (paired with tints, same order) ---------- */
  --icon-lavender: #7B61E8;
  --icon-sky: #3E8EF0;
  --icon-blush: #F0568C;
  --icon-butter: #F2A93B;
  --icon-mint: #22B07D;

  /* ---------- Color: semantic ---------- */
  --success: #22B07D;
  --danger: #E14B6A;
  --focus-ring: #7B61E8;

  /* ---------- Gradients ---------- */
  --gradient-primary: linear-gradient(135deg, #8C74F0 0%, #6A50DE 100%);
  --gradient-primary-hover: linear-gradient(135deg, #7B61E8 0%, #5E45CC 100%);
  --gradient-hero-scrim: linear-gradient(180deg, rgba(15, 12, 35, 0) 0%, rgba(15, 12, 35, 0.15) 55%, rgba(15, 12, 35, 0.55) 100%);

  /* ---------- Typography ---------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-script: 'Pacifico', cursive;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.2rem, 4.5vw, 4rem);
  --fs-h2: clamp(1.8rem, 3.2vw, 2.75rem);
  --fs-h3: clamp(1.35rem, 2vw, 1.85rem);
  --fs-h4: clamp(1.15rem, 1.3vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 1.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-heading: 1.15;
  --lh-body: 1.7;

  /* ---------- Radius ---------- */
  --radius-card: 24px;
  --radius-btn: 999px;
  --radius-img: 20px;
  --radius-badge: 999px;
  --radius-sm: 12px;

  /* ---------- Shadow (soft, violet-tinted, layered) ---------- */
  --shadow-sm: 0 2px 8px rgba(123, 97, 232, 0.08);
  --shadow-md: 0 10px 30px rgba(123, 97, 232, 0.10);
  --shadow-lg: 0 20px 50px rgba(123, 97, 232, 0.16);
  --shadow-btn: 0 10px 24px rgba(94, 69, 204, 0.30);
  --shadow-btn-hover: 0 14px 32px rgba(94, 69, 204, 0.40);

  /* ---------- Spacing scale (4/8px rhythm) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --section-py: clamp(4rem, 8vw, 7rem);
  --container-max: 1280px;
  --container-pad: 20px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --duration-fast: 200ms;
  --duration-base: 700ms;
  --duration-slow: 900ms;
  --stagger-step: 100ms;

  /* ---------- Nav (floating glass pill) ---------- */
  --nav-margin-top: 18px;
  --nav-pill-height-top: 76px;
  --nav-pill-height-scrolled: 60px;
  /* Safe top-clearance for hero/page-hero content so it never sits under the pill */
  --nav-space-top: 116px;

  /* ---------- Z-index scale ---------- */
  --z-base: 0;
  --z-decor: 1;
  --z-content: 10;
  --z-header: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 1100;
}

@media (max-width: 767.98px) {
  :root {
    --container-pad: 16px;
    --nav-margin-top: 12px;
    --nav-pill-height-top: 64px;
    --nav-pill-height-scrolled: 56px;
    --nav-space-top: 92px;
  }
}