/* ============================================================
   Heck & Co. — Foundations: Colour & Type
   Boutique brand-strategy agency. Quiet-luxury, heritage-green.
   Load this file, then use the CSS variables + semantic classes.
   ============================================================ */

/* ---------- Fonts ---------- */
/* Display / titles — LT Remark (high-contrast transitional serif) */
@font-face {
  font-family: "LT Remark";
  src: url("fonts/LTRemark-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "LT Remark";
  src: url("fonts/LTRemark-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "LT Remark";
  src: url("fonts/LTRemark-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "LT Remark";
  src: url("fonts/LTRemark-BoldItalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "LT Remark";
  src: url("fonts/LTRemark-Black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "LT Remark";
  src: url("fonts/LTRemark-BlackItalic.otf") format("opentype");
  font-weight: 900; font-style: italic; font-display: swap;
}

/* Body / UI — Manrope (geometric grotesque) */
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-ExtraLight.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Core palette (from IDV) ---------- */
  --deep-pine:    #0D221F;  /* Primária  — near-black green, primary ink + dark surfaces */
  --racing-green: #1F3A2C;  /* Secundária — signature green */
  --moss-olive:   #474F3D;  /* Secundária — muted olive */
  --stone-taupe:  #757261;  /* Neutra    — warm grey-green */
  --warm-sand:    #9B9782;  /* Neutra    — soft sage taupe */
  --soft-ivory:   #F0EFEC;  /* Neutra    — paper, primary light surface */
  --aged-brass:   #B29B69;  /* Acento    — gold, used sparingly */

  /* A couple of derived tints/shades for UI depth (oklch-harmonised) */
  --ivory-pure:   #FAF9F6;  /* lifted ivory for cards on ivory */
  --ivory-sink:   #E7E5DF;  /* recessed ivory / hairline fills */
  --pine-800:     #14302A;  /* surface above deep-pine */
  --pine-700:     #1A3A31;  /* hover on dark */
  --line-ivory:   #DCD9D0;  /* hairline on light */
  --line-pine:    rgba(240,239,236,0.14); /* hairline on dark */
  --brass-soft:   #C7B58C;  /* brass hover / lighter brass */

  /* ---------- Semantic surfaces & ink ---------- */
  --bg:        var(--soft-ivory);
  --bg-raised: var(--ivory-pure);
  --bg-sunken: var(--ivory-sink);
  --bg-invert: var(--deep-pine);

  --fg1: var(--deep-pine);    /* primary text on light */
  --fg2: var(--moss-olive);   /* secondary text on light */
  --fg3: var(--stone-taupe);  /* tertiary / captions on light */
  --fg-on-dark-1: var(--soft-ivory);
  --fg-on-dark-2: #C3C7BC;    /* secondary text on dark */
  --fg-on-dark-3: #8E938A;    /* tertiary text on dark */

  --accent: var(--aged-brass);
  --accent-ink: var(--deep-pine); /* text colour to sit on brass */
  --hairline: var(--line-ivory);
  --focus-ring: rgba(13,34,31,0.12);  /* neutral deep-pine ring — focus on functional elements never uses gold */

  /* ---------- Type families ---------- */
  --font-display: "LT Remark", "Cormorant Garamond", Georgia, serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Type scale (display = serif, fluid) ---------- */
  --t-display:  clamp(3.5rem, 7vw, 6rem);     /* hero serif */
  --t-h1:       clamp(2.5rem, 4.5vw, 3.75rem);
  --t-h2:       clamp(1.875rem, 3vw, 2.5rem);
  --t-h3:       1.5rem;
  --t-h4:       1.25rem;
  --t-body-lg:  1.125rem;
  --t-body:     1rem;
  --t-small:    0.875rem;
  --t-caption:  0.75rem;
  --t-overline: 0.6875rem;

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

  /* ---------- Radii — tight & serious; brand caps around 10px ---------- */
  --r-xs: 1px;  --r-sm: 3px;  --r-md: 6px;  --r-lg: 10px;
  --r-xl: 10px;            /* alias of lg — kept for back-compat; do not exceed */
  --r-pill: 999px;         /* RESERVED. Use with great restraint — small status dots
                              and the occasional tag only; never the default button shape. */

  /* ---------- Elevation (warm, soft, low-spread) ---------- */
  --shadow-sm: 0 1px 2px rgba(13,34,31,0.06), 0 1px 1px rgba(13,34,31,0.04);
  --shadow-md: 0 6px 18px -8px rgba(13,34,31,0.18), 0 2px 6px rgba(13,34,31,0.06);
  --shadow-lg: 0 24px 50px -20px rgba(13,34,31,0.30), 0 6px 14px rgba(13,34,31,0.08);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* quiet, refined ease-out */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 140ms; --dur-2: 240ms; --dur-3: 420ms;
}

/* ============================================================
   Semantic element styles — opt-in via classes.
   Prefix .hk- to avoid collisions when this file is imported.
   ============================================================ */
.hk-display, .hk-h1, .hk-h2, .hk-h3, .hk-h4 {
  font-family: var(--font-display);
  color: var(--fg1);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
.hk-display { font-size: var(--t-display); letter-spacing: -0.02em; }
.hk-h1 { font-size: var(--t-h1); }
.hk-h2 { font-size: var(--t-h2); line-height: 1.08; }
.hk-h3 { font-size: var(--t-h3); line-height: 1.18; letter-spacing: -0.005em; }
.hk-h4 { font-size: var(--t-h4); line-height: 1.25; }

.hk-lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body-lg);
  line-height: 1.6;
  color: var(--fg2);
  text-wrap: pretty;
  margin: 0;
}
.hk-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--fg2);
  text-wrap: pretty;
  margin: 0;
}
.hk-small { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.55; color: var(--fg3); margin: 0; }

/* Overline / eyebrow — the brand's signature label style: tracked, uppercase, small */
.hk-overline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-overline);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg3);
  margin: 0;
}
.hk-overline--brass { color: var(--accent); }

/* Inline / utility */
.hk-serif { font-family: var(--font-display); }
.hk-italic { font-style: italic; }
em, .hk-em { font-style: italic; }