/* ============================================================
   High Culture · Colors & Type tokens
   Used across landing pages, UI kits and any HC artifact.
   ============================================================ */

/* Type families — see VISUAL FOUNDATIONS in README.
   Headlines: Cormorant Garamond (a near-match for the bespoke
     editorial serif used in product photography & landings —
     condensed, contrasty, italic alternates). FLAGGED substitute.
   Body / UI: Inter (matches the existing styles.css stack).
   Mono / labels: JetBrains Mono — used sparingly for SKU /
     scientific call-outs.
*/
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Palette · neutrals (the dark canvas) ---------- */
  --hc-ink:       #050404;   /* page background, near-black */
  --hc-surface:   #0d0b09;   /* card / panel base */
  --hc-surface-2: #15110e;   /* raised panel */
  --hc-surface-3: #1d1814;   /* hover / pressed surface */
  --hc-cream:     #f5ebda;   /* primary text on dark */
  --hc-bone:      #ead7be;   /* secondary text on dark */
  --hc-muted:     #b7aa96;   /* tertiary / kicker */
  --hc-faint:     #8e8276;   /* disclaimer, captions */

  /* Hairlines — almost always a translucent gold */
  --hc-line:        rgba(228, 185, 128, 0.25);
  --hc-line-strong: rgba(235, 190, 126, 0.46);
  --hc-line-bone:   rgba(255, 255, 255, 0.08);

  /* ---------- Palette · house gold (the only constant accent) ---------- */
  --hc-gold:        #dcb178;
  --hc-gold-warm:   #e6bf86;
  --hc-gold-deep:   #b8793d;

  /* ---------- Palette · product accents ---------- */
  /* Mood — rose / plum, sourced from passiflora & berry imagery */
  --mood-accent:    #c7586a;
  --mood-accent-2:  #7f4aa0;
  --mood-glow:      rgba(199, 88, 106, 0.28);
  --mood-wash:      rgba(114,  48,  78, 0.34);

  /* Boost — amber / violet, from coffee + lion's mane imagery */
  --boost-accent:   #c57c43;
  --boost-accent-2: #7652cc;
  --boost-glow:     rgba(195, 116,  50, 0.28);
  --boost-wash:     rgba(133,  77,  23, 0.34);

  /* ---------- Palette · semantic ---------- */
  --hc-fg-1: var(--hc-cream);   /* primary fg */
  --hc-fg-2: var(--hc-bone);    /* secondary */
  --hc-fg-3: var(--hc-muted);   /* tertiary */
  --hc-fg-4: var(--hc-faint);   /* quaternary */
  --hc-bg-1: var(--hc-ink);
  --hc-bg-2: var(--hc-surface);
  --hc-bg-3: var(--hc-surface-2);

  /* ---------- Card / surface treatments ---------- */
  --hc-card-grad: linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  --hc-glass:     linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));

  /* ---------- Radii ---------- */
  --hc-r-pill: 999px;
  --hc-r-lg:   24px;   /* cards, hero art */
  --hc-r-md:   18px;   /* nested images, recipes */
  --hc-r-sm:   14px;   /* chips */
  --hc-r-xs:    8px;

  /* ---------- Shadow ---------- */
  --hc-shadow-card: 0 24px 90px rgba(0,0,0,0.55);
  --hc-shadow-art:  0 30px 70px rgba(0,0,0,0.80);
  --hc-shadow-cta:  0 18px 45px rgba(199, 88, 106, 0.28); /* default mood glow */

  /* ---------- Spacing scale (8pt base, generous on dark) ---------- */
  --hc-s-1:   4px;
  --hc-s-2:   8px;
  --hc-s-3:  12px;
  --hc-s-4:  16px;
  --hc-s-5:  20px;
  --hc-s-6:  24px;
  --hc-s-7:  32px;
  --hc-s-8:  48px;
  --hc-s-9:  72px;
  --hc-s-10: 96px;

  /* ---------- Layout ---------- */
  --hc-container: 1200px;
  --hc-gutter:    20px;

  /* ---------- Type · families ---------- */
  --hc-serif:  "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --hc-sans:   "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hc-mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type · semantic ---------- */
  /* Display — hero h1 type, big editorial */
  --hc-display-family: var(--hc-serif);
  --hc-display-weight: 600;
  --hc-display-tracking: -0.045em;
  --hc-display-leading: 0.86;

  /* Section title — h2 */
  --hc-h2-family: var(--hc-serif);
  --hc-h2-weight: 500;
  --hc-h2-tracking: -0.025em;
  --hc-h2-leading: 0.95;

  /* Card title — h3 */
  --hc-h3-family: var(--hc-serif);
  --hc-h3-weight: 500;
  --hc-h3-tracking: -0.01em;
  --hc-h3-leading: 1.02;

  /* Eyebrow — uppercase, tracked, gold */
  --hc-eyebrow-family: var(--hc-sans);
  --hc-eyebrow-weight: 800;
  --hc-eyebrow-tracking: 0.34em;
  --hc-eyebrow-size: 12px;

  /* Lead — italic-leaning serif intro */
  --hc-lead-family: var(--hc-serif);
  --hc-lead-weight: 400;

  /* Body */
  --hc-body-family: var(--hc-sans);
  --hc-body-weight: 400;
  --hc-body-leading: 1.5;
  --hc-body-size: 15px;

  /* Micro — chip, pill, label */
  --hc-micro-family: var(--hc-sans);
  --hc-micro-weight: 700;
  --hc-micro-tracking: 0.12em;
  --hc-micro-size: 12px;
}

/* ----------------------------------------------------------
   Element-level defaults — use the [data-hc] container to
   opt in without polluting global tag styling.
   ---------------------------------------------------------- */

[data-hc] {
  background: var(--hc-bg-1);
  color: var(--hc-fg-1);
  font-family: var(--hc-body-family);
  font-weight: var(--hc-body-weight);
  font-size: var(--hc-body-size);
  line-height: var(--hc-body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[data-hc] h1, [data-hc] .hc-display {
  font-family: var(--hc-display-family);
  font-weight: var(--hc-display-weight);
  letter-spacing: var(--hc-display-tracking);
  line-height: var(--hc-display-leading);
  font-size: clamp(58px, 8vw, 112px);
  margin: 0 0 var(--hc-s-6);
}

[data-hc] h2, [data-hc] .hc-h2 {
  font-family: var(--hc-h2-family);
  font-weight: var(--hc-h2-weight);
  letter-spacing: var(--hc-h2-tracking);
  line-height: var(--hc-h2-leading);
  font-size: clamp(30px, 4vw, 50px);
  margin: 0 0 var(--hc-s-4);
}

[data-hc] h3, [data-hc] .hc-h3 {
  font-family: var(--hc-h3-family);
  font-weight: var(--hc-h3-weight);
  letter-spacing: var(--hc-h3-tracking);
  line-height: var(--hc-h3-leading);
  font-size: 24px;
  margin: 0 0 var(--hc-s-3);
}

[data-hc] .hc-eyebrow {
  font-family: var(--hc-eyebrow-family);
  font-weight: var(--hc-eyebrow-weight);
  letter-spacing: var(--hc-eyebrow-tracking);
  text-transform: uppercase;
  font-size: var(--hc-eyebrow-size);
  color: var(--hc-gold);
  margin: 0 0 var(--hc-s-5);
}

[data-hc] .hc-lead {
  font-family: var(--hc-lead-family);
  font-weight: var(--hc-lead-weight);
  font-size: clamp(20px, 2.3vw, 31px);
  line-height: 1.1;
  margin: 0;
}

[data-hc] .hc-kicker {
  color: var(--hc-fg-3);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

[data-hc] .hc-micro {
  font-family: var(--hc-micro-family);
  font-weight: var(--hc-micro-weight);
  letter-spacing: var(--hc-micro-tracking);
  text-transform: uppercase;
  font-size: var(--hc-micro-size);
}

[data-hc] .hc-mono {
  font-family: var(--hc-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* Product themes — apply on a wrapping element */
[data-hc-product="mood"] {
  --hc-accent:   var(--mood-accent);
  --hc-accent-2: var(--mood-accent-2);
  --hc-glow:     var(--mood-glow);
  --hc-wash:     var(--mood-wash);
}
[data-hc-product="boost"] {
  --hc-accent:   var(--boost-accent);
  --hc-accent-2: var(--boost-accent-2);
  --hc-glow:     var(--boost-glow);
  --hc-wash:     var(--boost-wash);
}
[data-hc-product="house"] {
  --hc-accent:   var(--hc-gold);
  --hc-accent-2: var(--hc-gold-deep);
  --hc-glow:     rgba(220, 177, 120, 0.22);
  --hc-wash:     rgba(133,  77,  23, 0.22);
}