/* Hollie Tree Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --ht-blush: #DBC3B7;
  --ht-blush-100: #F4EBE6;
  --ht-blush-200: #EBDCD4;
  --ht-blush-600: #B8968A;
  --ht-blush-800: #8A6A5F;
  --ht-sage: #C1C1AD;
  --ht-sage-100: #EEEEE6;
  --ht-sage-200: #DCDCCD;
  --ht-sage-600: #8E8E76;
  --ht-sage-800: #5D5E4B;
  --ht-ink: #242833;
  --ht-ink-700: #3A3F4C;
  --ht-black: #121212;
  --ht-white: #FFFFFF;
  --ht-paper: #FBF8F5;
  --ht-linen: #F5F0EB;
  --ht-line: #E6DED7;
  --ht-line-strong: #CFC4BB;
  --ht-grey-500: #7A7570;
  --ht-grey-700: #4E4A46;
  --ht-silver: #B9BCC2;
  --ht-silver-100: #EEEFF1;
  --ht-gold: #B8955A;
  --ht-copper: #B0704C;
  --ht-cork: #C9A27A;
  --ht-wood: #6B4A33;
  --ht-olive: #6A5C33;
  --ht-pack-etch: #736964;
  --ht-pack-label: #DCD3CD;
  --ht-signature: #2B2523;
  --ht-signature-accent: #B08A7A;
  --ht-signature-on: #F1E4DD;
  --ht-sanctuary: #6F7A5E;
  --ht-sanctuary-accent: #A9B396;
  --ht-escapes: #E39A2E;
  --ht-escapes-accent: #D9566B;
  --ht-escapes-on: #2B1A05;
  --ht-spirits: #2E3550;
  --ht-spirits-accent: #9FB3D9;
  --ht-spirits-on: #E6ECF8;
  --ht-spirits-pack: #312C37;
  --ht-spirits-pack-accent: #A6AD94;
  --ht-success: #4F6B4A;
  --ht-success-bg: #E8EEE4;
  --ht-warning: #A86B1F;
  --ht-warning-bg: #F7EBDA;
  --ht-error: #A23B3B;
  --ht-error-bg: #F6E3E1;
  --ht-sale: #9C4A4A;
  --ht-award: #A88A4E;
  --surface-page: var(--ht-white);
  --surface-subtle: var(--ht-paper);
  --surface-warm: var(--ht-blush-100);
  --surface-blush: var(--ht-blush);
  --surface-sage: var(--ht-sage-100);
  --surface-sage-strong: var(--ht-sage);
  --surface-inverse: var(--ht-ink);
  --surface-card: var(--ht-white);
  --surface-media: var(--ht-linen);
  --text-strong: var(--ht-black);
  --text-body: #3B3835;
  --text-muted: var(--ht-grey-500);
  --text-inverse: #FFFFFF;
  --text-inverse-muted: #B9BBC2;
  --text-link: var(--ht-black);
  --text-sale: var(--ht-sale);
  --border-subtle: var(--ht-line);
  --border-strong: var(--ht-line-strong);
  --border-focus: var(--ht-black);
  --action-primary: var(--ht-black);
  --action-primary-hover: #2E2B29;
  --action-primary-text: #FFFFFF;
  --action-secondary-border: var(--ht-black);
  --action-accent: var(--ht-blush);
  --action-accent-hover: var(--ht-blush-600);
  --shadow-none: none;
  --shadow-raised: 0 1px 2px rgba(18,18,18,.06), 0 4px 16px rgba(18,18,18,.06);
  --shadow-overlay: 0 12px 40px rgba(18,18,18,.16);
  --shadow-focus: 0 0 0 2px #fff, 0 0 0 4px #121212;
}
:root {
  --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;
  --container: 1320px;
  --gutter: 24px;
  --header-h: 76px;
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-pill: 999px;
  --radius-round: 50%;
  --fs-display-xl: 72px;
  --fs-display-l: 56px;
  --fs-h1: 44px;
  --fs-h2: 34px;
  --fs-h3: 26px;
  --fs-h4: 20px;
  --fs-title: 22px;
  --fs-lead: 19px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;
  --fs-micro: 11px;
  --lh-tight: 1.08;
  --lh-heading: 1.2;
  --lh-body: 1.6;
  --ls-display: 0.04em;
  --ls-caps: 0.14em;
  --ls-label: 0.1em;
  --ls-body: 0.01em;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --border-hair: 1px;
  --border-thick: 2px;
  --font-display: 'Cinzel', Georgia, serif;
  --font-display-deco: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Jost', system-ui, sans-serif;
}
.display-xl { font-family: var(--font-display); font-size: 72px; line-height: 1.08; font-weight: 500; letter-spacing: 0.04em; }
.display-l { font-family: var(--font-display); font-size: 56px; line-height: 1.08; font-weight: 500; letter-spacing: 0.04em; }
.h1 { font-family: var(--font-display); font-size: 44px; line-height: 1.2; font-weight: 500; letter-spacing: 0.04em; }
.h2 { font-family: var(--font-display); font-size: 34px; line-height: 1.2; font-weight: 500; letter-spacing: 0.04em; }
.h3 { font-family: var(--font-serif); font-size: 26px; line-height: 1.2; font-weight: 500; }
.title { font-family: var(--font-serif); font-size: 22px; line-height: 1.2; font-weight: 500; }
.h4 { font-family: var(--font-serif); font-size: 20px; line-height: 1.2; font-weight: 500; }
.quote { font-family: var(--font-serif); font-size: 21px; line-height: 1.35; font-weight: 400; font-style: italic; }
.lead { font-family: var(--font-sans); font-size: 19px; line-height: 1.6; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 400; letter-spacing: 0.01em; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 400; }
.button { font-family: var(--font-sans); font-size: 13px; line-height: 1; font-weight: 500; letter-spacing: 0.14em; }
.eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 1.3; font-weight: 500; letter-spacing: 0.14em; }
.micro { font-family: var(--font-sans); font-size: 11px; line-height: 1.3; font-weight: 500; letter-spacing: 0.12em; }