/* ============================================================
   Himaya Garden — Foundations
   Colors + Type tokens. Import this once into any artifact.
   ============================================================ */

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

:root {
  /* ---------- Brand color: SAGE (the line-icon green) ---------- */
  --hg-sage-900:  #2f4a3c;
  --hg-sage-800:  #3a5a48;
  --hg-sage-700:  #4a6b58;   /* primary brand sage */
  --hg-sage-600:  #5d8170;
  --hg-sage-500:  #7a9b8b;
  --hg-sage-400:  #a3bdb0;
  --hg-sage-300:  #c9d8d0;
  --hg-sage-200:  #e2ebe5;
  --hg-sage-100:  #eef3ef;
  --hg-sage-50:   #f6f9f7;

  /* ---------- Cream / parchment (page surfaces) ---------- */
  --hg-cream-50:  #fdfaf3;
  --hg-cream-100: #faf6ee;   /* default page bg */
  --hg-cream-200: #f5efe2;
  --hg-cream-300: #ece3d0;
  --hg-cream-400: #ddcfb3;

  /* ---------- Terracotta / desert clay (accent) ---------- */
  --hg-clay-900:  #6a3320;
  --hg-clay-700:  #a85a3c;
  --hg-clay-600:  #c87655;   /* warm signature accent */
  --hg-clay-500:  #d68b6a;
  --hg-clay-400:  #e2a888;
  --hg-clay-200:  #f1d4bf;
  --hg-clay-100:  #f8e8db;

  /* ---------- Bloom (floral pinks from collage / sunset) ---------- */
  --hg-bloom-700: #b85c6f;
  --hg-bloom-500: #d98397;
  --hg-bloom-300: #efbac4;
  --hg-bloom-100: #f9e2e7;

  /* ---------- Sun / honey (logo rays + golden hour) ---------- */
  --hg-sun-700:   #c98a2b;
  --hg-sun-500:   #e0a957;
  --hg-sun-300:   #f1ce8e;
  --hg-sun-100:   #f9e9c6;

  /* ---------- Neutrals ---------- */
  --hg-ink:       #2a2620;   /* primary text — warm near-black */
  --hg-ink-soft:  #4a4339;   /* secondary text */
  --hg-ink-muted: #80766a;   /* tertiary, eyebrow */
  --hg-line:      #ddd2bf;   /* hairlines on cream */
  --hg-line-soft: #ece3d0;
  --hg-white:     #ffffff;

  /* ---------- Semantic surfaces ---------- */
  --hg-bg:           var(--hg-cream-100);
  --hg-bg-alt:       var(--hg-cream-200);
  --hg-bg-deep:      var(--hg-sage-900);   /* dark sections */
  --hg-surface:      var(--hg-white);
  --hg-surface-soft: var(--hg-cream-50);

  --hg-fg:           var(--hg-ink);
  --hg-fg-soft:      var(--hg-ink-soft);
  --hg-fg-muted:     var(--hg-ink-muted);
  --hg-fg-on-dark:   var(--hg-cream-100);

  --hg-primary:      var(--hg-sage-700);
  --hg-primary-fg:   var(--hg-cream-50);
  --hg-accent:       var(--hg-clay-600);

  /* ---------- Type families ----------
     Display: Italiana — tall, refined, the "HIMAYA GARDEN" feeling.
     Serif:   Cormorant Garamond — editorial paragraphs & subheads.
     Sans:    Montserrat — eyebrow CAPS, buttons, UI, footer.

     NOTE: True wordmark is custom hand-script;
     not redistributable. Italiana is a close digital stand-in
     for any large display. Flagged in README. */
  --hg-font-display: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif;
  --hg-font-serif:   'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --hg-font-sans:    'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ---------- Type scale ---------- */
  --hg-fs-eyebrow:  0.78rem;   /* 12.5px — small caps labels */
  --hg-fs-body-sm:  0.875rem;  /* 14 */
  --hg-fs-body:     1rem;      /* 16 */
  --hg-fs-body-lg:  1.125rem;  /* 18 — editorial reading */
  --hg-fs-lead:     1.375rem;  /* 22 — opening paragraph */
  --hg-fs-h6:       1.125rem;
  --hg-fs-h5:       1.375rem;
  --hg-fs-h4:       1.75rem;
  --hg-fs-h3:       2.25rem;
  --hg-fs-h2:       3rem;
  --hg-fs-h1:       4rem;
  --hg-fs-display:  5.5rem;    /* hero */

  --hg-lh-tight:    1.05;
  --hg-lh-snug:     1.2;
  --hg-lh-normal:   1.45;
  --hg-lh-relaxed:  1.7;

  --hg-tracking-tight:  -0.01em;
  --hg-tracking-normal: 0;
  --hg-tracking-wide:   0.08em;
  --hg-tracking-widest: 0.22em;   /* eyebrows / button caps */

  /* ---------- Radii ---------- */
  --hg-radius-xs: 2px;
  --hg-radius-sm: 4px;
  --hg-radius-md: 8px;
  --hg-radius-lg: 14px;          /* cards (gentle) */
  --hg-radius-pill: 999px;       /* buttons & tags often pill */

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

  /* ---------- Shadow / elevation (soft, low) ---------- */
  --hg-shadow-sm: 0 1px 2px rgba(60, 45, 25, 0.06);
  --hg-shadow-md: 0 6px 18px rgba(60, 45, 25, 0.08);
  --hg-shadow-lg: 0 18px 40px rgba(60, 45, 25, 0.10);
  --hg-shadow-xl: 0 30px 70px rgba(60, 45, 25, 0.14);

  /* ---------- Borders ---------- */
  --hg-border:      1px solid var(--hg-line);
  --hg-border-soft: 1px solid var(--hg-line-soft);
  --hg-border-dark: 1px solid var(--hg-sage-700);
}

/* =============== Semantic element styles =============== */

html { color: var(--hg-fg); background: var(--hg-bg); }

body {
  font-family: var(--hg-font-serif);
  font-size: var(--hg-fs-body);
  line-height: var(--hg-lh-relaxed);
  color: var(--hg-fg);
  background: var(--hg-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headlines — large, romantic serif, sentence case
   (the site uses "We are not simply an event venue"-style).      */
h1, .hg-h1 {
  font-family: var(--hg-font-display);
  font-weight: 400;
  font-size: var(--hg-fs-h1);
  line-height: var(--hg-lh-tight);
  letter-spacing: var(--hg-tracking-tight);
  color: var(--hg-fg);
  margin: 0 0 var(--hg-sp-5) 0;
}
h2, .hg-h2 {
  font-family: var(--hg-font-display);
  font-weight: 400;
  font-size: var(--hg-fs-h2);
  line-height: var(--hg-lh-snug);
  letter-spacing: var(--hg-tracking-tight);
  margin: 0 0 var(--hg-sp-4) 0;
}
h3, .hg-h3 {
  font-family: var(--hg-font-serif);
  font-weight: 500;
  font-size: var(--hg-fs-h3);
  line-height: var(--hg-lh-snug);
  margin: 0 0 var(--hg-sp-4) 0;
}
h4, .hg-h4 {
  font-family: var(--hg-font-serif);
  font-weight: 500;
  font-size: var(--hg-fs-h4);
  line-height: var(--hg-lh-snug);
  margin: 0 0 var(--hg-sp-3) 0;
}
h5, .hg-h5 {
  font-family: var(--hg-font-sans);
  font-weight: 500;
  font-size: var(--hg-fs-h5);
  line-height: var(--hg-lh-snug);
  margin: 0 0 var(--hg-sp-3) 0;
}

/* Eyebrow / section label — small caps, wide tracking, often above headlines */
.hg-eyebrow {
  font-family: var(--hg-font-sans);
  font-weight: 500;
  font-size: var(--hg-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--hg-tracking-widest);
  color: var(--hg-fg-muted);
  display: inline-block;
}

/* Pull-quote / lede — soft serif italic */
.hg-lead {
  font-family: var(--hg-font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--hg-fs-lead);
  line-height: var(--hg-lh-relaxed);
  color: var(--hg-fg-soft);
}

p { margin: 0 0 var(--hg-sp-4) 0; max-width: 64ch; }

a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--hg-sage-700); }

/* Hairline divider w/ a center diamond ◈ — used on the live site */
.hg-divider {
  display: flex; align-items: center; gap: var(--hg-sp-4);
  color: var(--hg-fg-muted);
}
.hg-divider::before, .hg-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--hg-line);
}