/* ============================================================
   HOUSE OF RITUAL — Design Foundations
   Colors + Type tokens. Import this file anywhere.
   ------------------------------------------------------------
   Fonts are loaded from Google Fonts as the closest free match
   to the brand's custom wordmark + editorial serif.
   See README "Typography" for the substitution note.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Hanken+Grotesk:wght@300;400;500;600&family=Sacramento&display=swap');

/* ---- Playfair Display (self-hosted) — the editorial serif ---- */
@font-face{ font-family:'Playfair Display'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/PlayfairDisplay-Regular.woff2') format('woff2'), url('assets/fonts/PlayfairDisplay-Regular.woff') format('woff'); }
@font-face{ font-family:'Playfair Display'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/PlayfairDisplay-Regular.woff2') format('woff2'), url('assets/fonts/PlayfairDisplay-Regular.woff') format('woff'); }
@font-face{ font-family:'Playfair Display'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/PlayfairDisplay-Regular.woff2') format('woff2'), url('assets/fonts/PlayfairDisplay-Regular.woff') format('woff'); }
@font-face{ font-family:'Playfair Display'; font-style:italic; font-weight:400; font-display:swap;
  src:url('assets/fonts/PlayfairDisplay-Italic.woff2') format('woff2'), url('assets/fonts/PlayfairDisplay-Italic.woff') format('woff'); }
@font-face{ font-family:'Playfair Display'; font-style:italic; font-weight:500; font-display:swap;
  src:url('assets/fonts/PlayfairDisplay-Italic.woff2') format('woff2'), url('assets/fonts/PlayfairDisplay-Italic.woff') format('woff'); }

:root {
  /* ---------- CORE BRAND ---------- */
  --olive:        #504D35;  /* the wordmark — primary brand color           */
  --olive-deep:   #3B3926;  /* pressed / hover for olive                     */
  --forest:       #1B2018;  /* deep embossed-texture green — alt dark ground */
  --forest-2:     #262B24;  /* lifted forest (cards on forest)               */
  --espresso:     #241A0F;  /* near-black warm brown — primary dark ground   */
  --espresso-2:   #332617;  /* lifted espresso surface                       */

  /* ---------- WARM NEUTRALS (paper) ---------- */
  --paper:        #EFE9DF;  /* primary light ground (warm cream)             */
  --paper-2:      #E6DECF;  /* deeper sand — alt section                     */
  --linen:        #D8CFBF;  /* card / divider on paper                       */
  --linen-2:      #C8BCA6;  /* stronger sand border                          */

  /* ---------- ACCENTS (clay & botanical) ---------- */
  --terracotta:   #9B5A38;  /* signature clay accent                         */
  --terracotta-deep:#7E4628;
  --clay:         #C59C66;  /* warm tan — soft highlight                     */
  --clay-soft:    #D6BE97;
  --sage:         #AEB0A3;  /* muted botanical grey-green                    */
  --honey:        #C9A24B;  /* gold balm accent (used sparingly)             */

  /* ---------- INK / TEXT ---------- */
  --ink:          #2B2619;  /* primary text on paper (warm near-black)       */
  --ink-2:        #6E6450;  /* secondary text on paper                       */
  --ink-3:        #998D77;  /* tertiary / captions on paper                  */
  --cream:        #EFE9DF;  /* primary text on dark grounds                  */
  --cream-2:      #BCB3A0;  /* secondary text on dark                        */
  --cream-3:      #8A8273;  /* tertiary text on dark                         */
  --line:         rgba(43,38,25,0.14);  /* hairline on paper                 */
  --line-dark:    rgba(239,233,223,0.16); /* hairline on dark                */

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Jost', 'Futura', system-ui, sans-serif;       /* geometric caps: wordmark, eyebrows, nav, buttons */
  --font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif; /* editorial headlines + italics */
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* UI + paragraphs */
  --font-script:  'Sacramento', cursive;                          /* the "of" flourish, decorative accents */

  /* ---------- TYPE SCALE (fluid-ish, px) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  38px;
  --text-3xl:  52px;
  --text-4xl:  72px;
  --text-5xl:  104px;

  /* eyebrow / label tracking */
  --track-label: 0.28em;
  --track-wide:  0.18em;
  --track-tight: 0.01em;

  /* ---------- RADII ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;     /* default control radius — quiet, near-square */
  --r-lg: 10px;
  --r-pill: 999px;

  /* ---------- ELEVATION (warm, low, diffuse) ---------- */
  --shadow-sm: 0 1px 2px rgba(43,38,25,0.06);
  --shadow-md: 0 8px 24px -12px rgba(43,38,25,0.22);
  --shadow-lg: 0 24px 60px -24px rgba(43,38,25,0.34);

  /* ---------- SPACING (8px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* gentle, settled */
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 600ms;
}

/* ============================================================
   SEMANTIC TYPE — apply these classes directly
   ============================================================ */

.hor-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-2);
}

.hor-display {              /* big editorial serif moments */
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.hor-display em, .hor-serif-italic {
  font-style: italic;
  font-weight: 500;
}

.hor-h1 {                  /* geometric all-caps title */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1.08;
  color: var(--ink);
}
.hor-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--ink);
}
.hor-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

.hor-lead {                /* intro paragraph */
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--ink-2);
}
.hor-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--ink-2);
}
.hor-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-3);
}
.hor-script {
  font-family: var(--font-script);
  font-size: var(--text-2xl);
  color: var(--terracotta);
  line-height: 1;
}

/* dark-ground variants */
.on-dark .hor-eyebrow { color: var(--cream-2); }
.on-dark .hor-display, .on-dark .hor-h1, .on-dark .hor-h2, .on-dark .hor-h3 { color: var(--cream); }
.on-dark .hor-lead, .on-dark .hor-body { color: var(--cream-2); }
.on-dark .hor-small { color: var(--cream-3); }