/* ------------------------------------------------------------------
 * Harrigan Home — Design Tokens (v2 · warm cream + walnut)
 * Cream-dominant editorial · italic-serif taglines · warm wood accents
 * Source: Harrigan Home.fig + new HH-logo-full wordmark + moodboard
 * ------------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Alegreya+SC:wght@400;500;700&family=Poppins:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ─────────────────────────────────────────────────────────
     PRIMARY PALETTE (new direction · warm cream + walnut)
     ───────────────────────────────────────────────────────── */

  /* Cream / canvas — the brand's dominant surface */
  --cream-paper:   #F8F4EA;   /* off-white paper, the new default canvas */
  --cream-warm:    #F0EAD8;   /* warmer cream for inset sections */
  --cream-deep:    #E8DFC8;   /* slightly deeper cream for cards */
  --cream-tile:    #ECE5D3;   /* card surface on cream canvas */

  /* Walnut / wood — the new dark / accent scale (replaces forest as primary dark) */
  --walnut-50:   #F4ECDD;
  --walnut-100:  #E5D2B6;
  --walnut-200:  #D2B387;
  --walnut-300:  #B89163;
  --walnut-400:  #9A7350;   /* warm tan — buttons + body accent text */
  --walnut-500:  #7E5A3D;   /* medium walnut — primary brand brown */
  --walnut-600:  #6E4F36;   /* deep walnut — logo color on cream */
  --walnut-700:  #553D29;   /* espresso */
  --walnut-800:  #3C2A1D;
  --walnut-900:  #251A12;   /* near-black warm */

  /* Brand legacy (still valid; used sparingly now) */
  --green-50:  #F1F8F4;
  --green-500: #1B3A2D;   /* Forest Green base */
  --green-deep: #123524;
  --gold-500:  #E8B15D;   /* Gold base — highlight accent */
  --gold-700:  #D4860F;
  --cream-500: #EDECCB;   /* original Cream base */
  --dark-500:  #1A1A1A;

  --white:    #FFFFFF;
  --gray-50:  #F8F9FA;
  --gray-200: #E9ECEF;
  --gray-300: #DEE2E6;
  --gray-400: #ADB5BD;
  --gray-500: #6C757D;
  --gray-600: #4A4A4A;

  /* Semantic */
  --success-500: #198754;
  --warning-500: #B58502;
  --error-500:   #B33A28;   /* warmer brick red to match palette */
  --info-500:    #4A6A8B;

  /* ─────────────────────────────────────────────────────────
     SEMANTIC SURFACES (use these in components)
     ───────────────────────────────────────────────────────── */
  --bg-canvas:       var(--cream-paper);      /* page background */
  --bg-surface:      var(--white);            /* card on canvas */
  --bg-tile:         var(--cream-tile);       /* inset tile / pill */
  --bg-warm:         var(--cream-warm);       /* alt warm section */
  --bg-dark:         var(--walnut-700);       /* dark inverse section */
  --bg-darker:       var(--walnut-900);       /* deep inverse / footer */
  --bg-green:        var(--green-deep);       /* legacy editorial green */

  --fg-default:      var(--walnut-700);       /* body ink on cream */
  --fg-display:      var(--walnut-600);       /* italic display on cream */
  --fg-muted:        var(--walnut-400);       /* soft body / metadata */
  --fg-soft:         var(--walnut-300);
  --fg-on-dark:      var(--cream-paper);      /* body on walnut bg */
  --fg-display-dark: var(--cream-warm);       /* italic display on walnut */
  --fg-on-cream-tile: var(--walnut-700);

  --border-hairline: rgba(110, 79, 54, 0.18); /* warm walnut alpha */
  --border-default:  var(--walnut-600);
  --border-focus:    var(--gold-500);

  /* ─────────────────────────────────────────────────────────
     TYPOGRAPHY
     ───────────────────────────────────────────────────────── */
  --font-italic:  'Cormorant Garamond', 'Saol Display', Georgia, serif;
  --font-display: 'Alegreya SC', 'Cormorant SC', Georgia, serif;
  --font-body:    'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:      'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Italic-serif tagline ramp — the new signature voice */
  --type-tagline-xl: italic 500 88px/1.0 var(--font-italic);
  --type-tagline-l:  italic 500 64px/1.05 var(--font-italic);
  --type-tagline-m:  italic 500 44px/1.1 var(--font-italic);
  --type-tagline-s:  italic 500 28px/1.2 var(--font-italic);

  /* Heading ramp (small-caps display still available for branding moments) */
  --type-display-xl: 700 72px/84px var(--font-display);
  --type-display-l:  700 56px/64px var(--font-display);
  --type-display-m:  700 48px/56px var(--font-display);
  --type-h1: 700 40px/48px var(--font-display);
  --type-h2: 700 32px/40px var(--font-display);
  --type-h3: 500 28px/36px var(--font-display);
  --type-h4: 500 24px/32px var(--font-display);
  --type-h5: 600 20px/28px var(--font-body);
  --type-h6: 600 18px/24px var(--font-body);

  /* Body */
  --type-body-xl: 400 20px/32px var(--font-body);
  --type-body-l:  400 18px/30px var(--font-body);
  --type-body-m:  400 16px/26px var(--font-body);
  --type-body-s:  400 14px/22px var(--font-body);
  --type-body-xs: 400 12px/18px var(--font-body);

  /* Utility */
  --type-label-m: 500 14px/20px var(--font-body);
  --type-label-s: 500 12px/16px var(--font-body);
  --type-overline:700 11px/16px var(--font-ui);
  --type-caption: 400 12px/16px var(--font-ui);
  --type-button:  500 16px/24px var(--font-body);

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

  --size-s:   32px; --size-m: 40px; --size-l: 48px; --size-xl: 56px;

  /* ─────────────────────────────────────────────────────────
     RADII — softer + rounder in new direction
     ───────────────────────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  12px;     /* default buttons + inputs */
  --radius-lg:  20px;     /* cards */
  --radius-xl:  28px;     /* hero image frames */
  --radius-2xl: 36px;
  --radius-pill: 9999px;  /* primary button shape in new direction */

  /* Borders */
  --border-1:   1px;
  --border-1_5: 1.5px;
  --border-2:   2px;

  /* ─────────────────────────────────────────────────────────
     ELEVATION — warmer, browner shadow tint
     ───────────────────────────────────────────────────────── */
  --elev-1: 0 1px 2px 0 rgba(85,61,41,0.06);
  --elev-2: 0 2px 6px 0 rgba(85,61,41,0.08), 0 1px 2px 0 rgba(85,61,41,0.05);
  --elev-3: 0 8px 20px -4px rgba(85,61,41,0.12), 0 2px 4px -1px rgba(85,61,41,0.06);
  --elev-4: 0 18px 32px -8px rgba(85,61,41,0.16), 0 4px 8px -2px rgba(85,61,41,0.08);
  --elev-5: 0 32px 60px -10px rgba(85,61,41,0.22), 0 8px 16px -4px rgba(85,61,41,0.10);

  /* Motion */
  --dur-default: 200ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
}

/* ------------------------------------------------------------------ */
/* Text classes                                                        */
/* ------------------------------------------------------------------ */
.hh-tagline-xl { font: var(--type-tagline-xl); color: var(--fg-display); letter-spacing: 0.005em; }
.hh-tagline-l  { font: var(--type-tagline-l);  color: var(--fg-display); }
.hh-tagline-m  { font: var(--type-tagline-m);  color: var(--fg-display); }
.hh-tagline-s  { font: var(--type-tagline-s);  color: var(--fg-display); }

.hh-display-l { font: var(--type-display-l); }
.hh-h1 { font: var(--type-h1); }
.hh-h2 { font: var(--type-h2); }
.hh-h3 { font: var(--type-h3); }
.hh-h4 { font: var(--type-h4); }
.hh-h5 { font: var(--type-h5); }
.hh-h6 { font: var(--type-h6); }
.hh-body-xl { font: var(--type-body-xl); }
.hh-body-l  { font: var(--type-body-l); }
.hh-body-m  { font: var(--type-body-m); }
.hh-body-s  { font: var(--type-body-s); }
.hh-overline { font: var(--type-overline); text-transform: uppercase; letter-spacing: 0.12em; }
.hh-caption  { font: var(--type-caption); color: var(--fg-muted); }

/* ------------------------------------------------------------------ */
/* Buttons — new direction uses pill-shape primaries                   */
/* ------------------------------------------------------------------ */
.hh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  height: var(--size-l);
  padding: 0 var(--space-8);
  border-radius: var(--radius-pill);
  font: var(--type-button);
  border: 0; cursor: pointer;
  transition: background var(--dur-default) var(--ease-standard),
              transform 120ms var(--ease-standard),
              box-shadow var(--dur-default) var(--ease-standard);
}
.hh-btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.hh-btn:active { transform: scale(0.98); }
.hh-btn--s  { height: var(--size-s); padding: 0 var(--space-5); font: var(--type-label-m); }
.hh-btn--m  { height: var(--size-m); padding: 0 var(--space-6); }
.hh-btn--xl { height: var(--size-xl); padding: 0 var(--space-10); font: 500 18px/24px var(--font-body); }

.hh-btn--primary   { background: var(--walnut-500); color: var(--cream-paper); }
.hh-btn--primary:hover   { background: var(--walnut-600); }
.hh-btn--secondary { background: transparent; color: var(--walnut-600); border: 1.5px solid var(--walnut-600); }
.hh-btn--secondary:hover { background: var(--walnut-600); color: var(--cream-paper); }
.hh-btn--tertiary  { background: transparent; color: var(--walnut-600); padding: 0 var(--space-2); }
.hh-btn--tertiary:hover  { color: var(--walnut-800); text-decoration: underline; }
.hh-btn--ghost-light { background: transparent; color: var(--cream-paper); border: 1.5px solid var(--cream-paper); }
.hh-btn--ghost-light:hover { background: var(--cream-paper); color: var(--walnut-700); }
.hh-btn--gold      { background: var(--gold-500); color: var(--walnut-800); }
.hh-btn--gold:hover      { background: #D9A14A; }

/* ------------------------------------------------------------------ */
/* Card                                                                */
/* ------------------------------------------------------------------ */
.hh-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  padding: var(--space-6);
}
.hh-card--cream  { background: var(--cream-tile); }
.hh-card--warm   { background: var(--cream-warm); }
.hh-card--walnut { background: var(--walnut-600); color: var(--cream-paper); }
.hh-card--outline { background: transparent; box-shadow: none; border: 1.5px solid var(--border-hairline); }

/* Soft media frame — used for hero photography */
.hh-media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--elev-3);
}

/* ------------------------------------------------------------------
 * HH MARK — icon-only logo
 * Uses CSS mask so the PNG silhouette can be recoloured per surface.
 * Pick the color modifier based on the background:
 *   on cream / paper   → .hh-mark--walnut  (dark walnut)
 *   on warm cream tile → .hh-mark--walnut
 *   on walnut / dark   → .hh-mark--cream
 *   on green legacy    → .hh-mark--gold or .hh-mark--cream
 * Size with CSS height — width auto-scales (mark is roughly 0.94:1 w:h).
 * ------------------------------------------------------------------ */
.hh-mark {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: middle;
  -webkit-mask-image: url('assets/logo/LogoHHICon.png');
          mask-image: url('assets/logo/LogoHHICon.png');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: currentColor;        /* fallback — inherits ink */
}
.hh-mark--walnut { background-color: var(--walnut-600); }
.hh-mark--ink    { background-color: var(--walnut-800); }
.hh-mark--cream  { background-color: var(--cream-paper); }
.hh-mark--gold   { background-color: var(--gold-500); }
.hh-mark--green  { background-color: var(--green-deep); }
.hh-mark--black  { background-color: #000; }

/* When the mark is the main brand element in a nav / footer, give it a
   width and let height follow the natural aspect ratio. */
.hh-mark[data-h] { height: var(--mark-h, 1em); width: calc(var(--mark-h, 1em) * 0.945); }