/* ============================================================
   Health Pad — DIY Retreat Planner
   Core type + color foundation
   ============================================================ */

/* ---- Fonts (self-hosted; copied from upstream design export) ---- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* DM Sans loaded from Google Fonts CDN until we host woff2 locally.
   Pinned to a single import for 400/500/600 weights — the only ones
   we use in body copy and UI. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap");

:root {
  /* ----------------------------------------------------------
     Color tokens — base
     The brand sits on a neutral dark stage and an off-white
     "cream" surface, with three earthy chromatic palettes:
     forest (deep moss), sage (dusty olive-green), cream (paper).
     ---------------------------------------------------------- */

  /* Neutrals (shade-0 darkest → shade-7 lightest in the source spec) */
  --hp-white:             #ffffff;
  --hp-neutral-1:         #f2f2f2;
  --hp-neutral-2:         #d9d9d9;
  --hp-neutral-3:         #b4b4b4;
  --hp-neutral-4:         #838382;
  --hp-neutral-5:         #525250;
  --hp-neutral-6:         #20201e; /* primary surface — default page bg */
  --hp-neutral-7:         #080806; /* near-black */

  /* Forest — primary brand accent (deep moss) */
  --hp-forest-1:          #eaeae7;
  --hp-forest-2:          #d6d6d0;
  --hp-forest-3:          #72705c;
  --hp-forest:            #363317; /* canonical forest */
  --hp-forest-5:          #2b2812;
  --hp-forest-6:          #151409;
  --hp-forest-7:          #100f06;

  /* Cream — warm paper surface */
  --hp-cream-1:           #fefefc;
  --hp-cream-2:           #fdfdfa;
  --hp-cream-3:           #f8f8f0;
  --hp-cream:             #f6f6ea; /* canonical cream */
  --hp-cream-5:           #c4c4bb;
  --hp-cream-6:           #62625d;
  --hp-cream-7:           #494946;

  /* Sage — supporting olive */
  --hp-sage-1:            #f5f4f2;
  --hp-sage-2:            #ebeae5;
  --hp-sage-3:            #b9b8a6;
  --hp-sage:              #9c9a81; /* canonical sage */
  --hp-sage-5:            #7c7b67;
  --hp-sage-6:            #3e3d33;
  --hp-sage-7:            #2e2e26;

  /* Transparency rails (used for borders / overlays on dark) */
  --hp-white-5:           color-mix(in srgb, #fff, transparent 95%);
  --hp-white-10:          color-mix(in srgb, #fff, transparent 90%);
  --hp-white-20:          color-mix(in srgb, #fff, transparent 80%);
  --hp-white-30:          color-mix(in srgb, #fff, transparent 70%);
  --hp-white-50:          color-mix(in srgb, #fff, transparent 50%);
  --hp-ink-10:            color-mix(in srgb, #080806, transparent 90%);
  --hp-ink-20:            color-mix(in srgb, #080806, transparent 80%);

  /* ----------------------------------------------------------
     Semantic role tokens — default (scheme-1, dark)
     Use these in components so swapping schemes works.
     ---------------------------------------------------------- */
  --hp-bg:                var(--hp-neutral-6);
  --hp-bg-elev:           color-mix(in srgb, var(--hp-neutral-6), #fff 4%);
  --hp-fg:                var(--hp-white);
  --hp-fg-muted:          color-mix(in srgb, var(--hp-white), transparent 30%);
  --hp-fg-subtle:         color-mix(in srgb, var(--hp-white), transparent 55%);
  --hp-border:            var(--hp-white-20);
  --hp-border-strong:     var(--hp-white-30);
  --hp-accent:            var(--hp-white);
  --hp-accent-ink:        var(--hp-neutral-6);

  /* ----------------------------------------------------------
     Typography
     A two-family system: Cormorant Garamond (serif) for display,
     DM Sans (sans) for body / UI. The serif carries warmth and
     editorial gravity; the sans keeps the running copy plain.
     ---------------------------------------------------------- */
  --hp-font-serif:        "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --hp-font-sans:         "DM Sans", "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --hp-font-body:         var(--hp-font-sans);
  --hp-font-display:      var(--hp-font-serif);

  --hp-weight-light:      300;
  --hp-weight-regular:    400;
  --hp-weight-medium:     500; /* headings */
  --hp-weight-semibold:   600;
  --hp-weight-bold:       700;

  /* Display / heading scale — desktop ≥ lg(992px) */
  --hp-h1:                72px;
  --hp-h2:                52px;
  --hp-h3:                44px;
  --hp-h4:                36px;
  --hp-h5:                28px;
  --hp-h6:                22px;

  /* Body text scale */
  --hp-text-large:        22px;
  --hp-text-medium:       18px;
  --hp-text-regular:      16px;
  --hp-text-small:        14px;
  --hp-text-tiny:         12px;

  --hp-leading-tight:     1.15;
  --hp-leading-snug:      1.2;
  --hp-leading-normal:    1.4;
  --hp-leading-relaxed:   1.5;
  --hp-tracking-tight:    -0.01em;
  --hp-tracking-normal:   0em;

  /* ----------------------------------------------------------
     Shape / spacing / motion
     ---------------------------------------------------------- */
  --hp-radius-button:     0px;     /* sharp; serif brand reads cleaner with hard edges */
  --hp-radius-input:      0px;
  --hp-radius-badge:      0px;
  --hp-radius-card:       16px;    /* cards & image frames get a soft rounding */
  --hp-radius-image:      16px;

  --hp-border-width:      1px;
  --hp-divider-width:     1px;

  --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;
  --hp-space-10:          120px;   /* section padding desktop */

  --hp-container:         1280px;
  --hp-container-narrow:  768px;
  --hp-section-pad-y-d:   112px;
  --hp-section-pad-y-m:   64px;
  --hp-section-pad-x:     5%;

  --hp-shadow-card:       0 1px 0 rgba(255,255,255,0.04) inset;
  --hp-shadow-pop:        0 24px 60px -20px rgba(0,0,0,0.6);

  --hp-ease:              cubic-bezier(0.4, 0, 0.2, 1);
  --hp-dur-fast:          120ms;
  --hp-dur:               220ms;
  --hp-dur-slow:          400ms;
}

/* ----------------------------------------------------------
   Mobile-first downshift of type scale (<992px)
   ---------------------------------------------------------- */
@media (max-width: 991.98px) {
  :root {
    --hp-h1:              44px;
    --hp-h2:              40px;
    --hp-h3:              32px;
    --hp-h4:              24px;
    --hp-h5:              20px;
    --hp-h6:              18px;
    --hp-text-large:      18px;
    --hp-text-medium:     16px;
    --hp-text-regular:    14px;
    --hp-section-pad-y-d: 64px;
  }
}

/* ============================================================
   Scheme utilities — apply on a section to flip palette
   ============================================================ */

.hp-scheme-1 { /* Default: deep neutral dark, white type */
  --hp-bg:           var(--hp-neutral-6);
  --hp-bg-elev:      color-mix(in srgb, var(--hp-neutral-6), #fff 4%);
  --hp-fg:           var(--hp-white);
  --hp-fg-muted:     color-mix(in srgb, var(--hp-white), transparent 30%);
  --hp-fg-subtle:    color-mix(in srgb, var(--hp-white), transparent 55%);
  --hp-border:       var(--hp-white-20);
  --hp-accent:       var(--hp-white);
  --hp-accent-ink:   var(--hp-neutral-6);
  background-color:  var(--hp-bg);
  color:             var(--hp-fg);
}
.hp-scheme-forest { /* Deep moss bg, cream type */
  --hp-bg:           var(--hp-forest);
  --hp-bg-elev:      var(--hp-forest-5);
  --hp-fg:           var(--hp-cream);
  --hp-fg-muted:     color-mix(in srgb, var(--hp-cream), transparent 25%);
  --hp-fg-subtle:    color-mix(in srgb, var(--hp-cream), transparent 50%);
  --hp-border:       color-mix(in srgb, var(--hp-cream), transparent 80%);
  --hp-accent:       var(--hp-cream);
  --hp-accent-ink:   var(--hp-forest);
  background-color:  var(--hp-bg);
  color:             var(--hp-fg);
}
.hp-scheme-cream { /* Warm paper bg, forest type */
  --hp-bg:           var(--hp-cream);
  --hp-bg-elev:      var(--hp-cream-1);
  --hp-fg:           var(--hp-forest);
  --hp-fg-muted:     color-mix(in srgb, var(--hp-forest), transparent 25%);
  --hp-fg-subtle:    var(--hp-cream-6);
  --hp-border:       color-mix(in srgb, var(--hp-forest), transparent 85%);
  --hp-accent:       var(--hp-forest);
  --hp-accent-ink:   var(--hp-cream);
  background-color:  var(--hp-bg);
  color:             var(--hp-fg);
}
.hp-scheme-sage { /* Dusty olive bg, deep forest type */
  --hp-bg:           var(--hp-sage);
  --hp-bg-elev:      var(--hp-sage-3);
  --hp-fg:           var(--hp-forest);
  --hp-fg-muted:     color-mix(in srgb, var(--hp-forest), transparent 30%);
  --hp-fg-subtle:    var(--hp-sage-6);
  --hp-border:       color-mix(in srgb, var(--hp-forest), transparent 80%);
  --hp-accent:       var(--hp-forest);
  --hp-accent-ink:   var(--hp-cream);
  background-color:  var(--hp-bg);
  color:             var(--hp-fg);
}

/* ============================================================
   Element defaults — drop into <body> to get the brand for free
   ============================================================ */
.hp {
  font-family: var(--hp-font-body);
  font-weight: var(--hp-weight-regular);
  font-size: var(--hp-text-medium);
  line-height: var(--hp-leading-relaxed);
  color: var(--hp-fg);
  background-color: var(--hp-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hp h1, .hp .h1,
.hp h2, .hp .h2,
.hp h3, .hp .h3,
.hp h4, .hp .h4,
.hp h5, .hp .h5,
.hp h6, .hp .h6 {
  font-family: var(--hp-font-display);
  font-weight: var(--hp-weight-medium);
  letter-spacing: var(--hp-tracking-tight);
  line-height: var(--hp-leading-snug);
  margin: 0;
  text-wrap: pretty;
}

.hp h1, .hp .h1 { font-size: var(--hp-h1); line-height: var(--hp-leading-tight); }
.hp h2, .hp .h2 { font-size: var(--hp-h2); }
.hp h3, .hp .h3 { font-size: var(--hp-h3); }
.hp h4, .hp .h4 { font-size: var(--hp-h4); line-height: var(--hp-leading-snug); }
.hp h5, .hp .h5 { font-size: var(--hp-h5); line-height: var(--hp-leading-normal); }
.hp h6, .hp .h6 { font-size: var(--hp-h6); line-height: var(--hp-leading-normal); }

.hp .text-large    { font-size: var(--hp-text-large);    line-height: var(--hp-leading-relaxed); }
.hp .text-medium   { font-size: var(--hp-text-medium);   line-height: var(--hp-leading-relaxed); }
.hp .text-regular  { font-size: var(--hp-text-regular);  line-height: var(--hp-leading-relaxed); }
.hp .text-small    { font-size: var(--hp-text-small);    line-height: var(--hp-leading-relaxed); }
.hp .text-tiny     { font-size: var(--hp-text-tiny);     line-height: var(--hp-leading-relaxed); }

.hp .tagline {
  font-size: var(--hp-text-medium);
  font-weight: var(--hp-weight-medium);
  letter-spacing: 0.02em;
}

.hp p { margin: 0; }
.hp p + p { margin-top: 1em; }

/* ============================================================
   Buttons — sharp-edged, single weight, two flavors
   ============================================================ */
.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--hp-font-body);
  font-weight: var(--hp-weight-medium);
  font-size: var(--hp-text-medium);
  line-height: 1;
  padding: 12px 24px;
  border-radius: var(--hp-radius-button);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--hp-dur) var(--hp-ease),
              color var(--hp-dur) var(--hp-ease),
              border-color var(--hp-dur) var(--hp-ease),
              opacity var(--hp-dur) var(--hp-ease);
  text-decoration: none;
  white-space: nowrap;
}
.hp-btn--primary {
  background: var(--hp-accent);
  color: var(--hp-accent-ink);
  border-color: var(--hp-accent);
}
.hp-btn--primary:hover { opacity: 0.88; }
.hp-btn--primary:active { opacity: 0.75; }

.hp-btn--secondary {
  background: transparent;
  color: var(--hp-fg);
  border-color: var(--hp-fg);
}
.hp-btn--secondary:hover {
  background: var(--hp-fg);
  color: var(--hp-bg);
}

.hp-btn--ghost {
  background: transparent;
  color: var(--hp-fg);
  border-color: transparent;
  padding-inline: 0;
}
.hp-btn--ghost:hover { color: var(--hp-fg-muted); }

/* ============================================================
   Card — outlined, 16px radius
   ============================================================ */
.hp-card {
  background: var(--hp-bg);
  border: var(--hp-border-width) solid var(--hp-border);
  border-radius: var(--hp-radius-card);
  padding: 32px;
}

/* ============================================================
   Input — sharp underline-ish box, 0 radius
   ============================================================ */
.hp-input {
  font-family: var(--hp-font-body);
  font-size: var(--hp-text-medium);
  background: transparent;
  color: var(--hp-fg);
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-radius-input);
  padding: 12px 16px;
  outline: none;
  transition: border-color var(--hp-dur) var(--hp-ease);
}
.hp-input::placeholder { color: var(--hp-fg-subtle); }
.hp-input:focus { border-color: var(--hp-fg); }

/* ============================================================
   Layout helpers
   ============================================================ */
.hp-container { max-width: var(--hp-container); margin-inline: auto; padding-inline: var(--hp-section-pad-x); }
.hp-section   { padding-block: var(--hp-section-pad-y-d); }

/* ============================================================
   Marquee keyframes (logo carousel etc.)
   ============================================================ */
@keyframes hp-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.hp-marquee { animation: hp-loop 20s linear infinite; }