/* ============================================================
   HEADMARK ART — Core tokens: color + type
   A content engine, not a content gig.
   ------------------------------------------------------------
   Load this file, then use the CSS variables and semantic
   classes below. Fonts load from Google Fonts.

   Sibling of the Headmark AI design system: shares the warm
   ground, the Inter body face, and the --hm-* token system, so
   the two brands read as one family. Distinct on purpose:
   Headmark Art uses an editorial display serif (Fraunces) and a
   coral-rose + teal creative palette, where Headmark AI uses a
   grotesque sans (Archivo) and a single burnt orange. One is a
   creative studio, the other an engineering shop.

   FONT NOTE: Headlines use "Fraunces" (Google Fonts), a warm,
   characterful display serif for an editorial, creative voice.
   Body face is "Inter" (shared with Headmark AI).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- Warm ground (shared family with Headmark AI) ---- */
  --hm-bg:            #FCF7F1; /* warm cream — primary background */
  --hm-surface:       #F4EBE0; /* warm beige — section panels / fills */
  --hm-surface-2:     #ECE1D3; /* deeper beige — nested fills / hovers */
  --hm-white:         #FFFFFF;

  /* ---- Ink ---- */
  --hm-ink:           #241B20; /* warm plum-black — text / strong */
  --hm-ink-2:         #5E5258; /* secondary text */
  --hm-ink-3:         #8C8087; /* tertiary / captions / placeholders */
  --hm-border:        #E8DFD5; /* hairline lines & borders */
  --hm-border-strong: #D8CCBE; /* stronger dividers / input borders */

  /* ---- Brand primary: coral-rose (distinct from .ai burnt orange) ---- */
  --hm-primary:       #C9325A; /* coral-rose — brand primary */
  --hm-primary-dark:  #A8294A; /* hover / press / depth */
  --hm-primary-text:  #B82A50; /* darker rose for text links (AA on cream) */
  --hm-primary-soft:  #F7E0E6; /* rose tint — soft fills / badges */
  --hm-on-primary:    #FFF7F2; /* text/icon on rose */

  /* ---- Creative pop: teal ---- */
  --hm-teal:          #0E8C7B; /* teal — decorative accents, dots, icons */
  --hm-teal-ink:      #0A6A5D; /* darker teal — text on cream (AA) */
  --hm-teal-soft:     #DBEFEA; /* teal tint — soft fills / badges */

  /* ---- Dark (warm) ---- */
  --hm-dark:          #241B20; /* near-black warm — dark sections / footer */
  --hm-dark-2:        #332830; /* raised surface on dark */
  --hm-on-dark:       #F3E9DF; /* text on dark */
  --hm-on-dark-2:     #B4A69D; /* secondary text on dark */

  /* ---- Type families ---- */
  --hm-head:  "Fraunces", Georgia, "Times New Roman", serif; /* editorial display serif */
  --hm-serif: var(--hm-head);                                /* alias */
  --hm-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---- Type scale (whitespace-forward, editorial) ---- */
  --hm-display:  clamp(2.4rem, 1.4rem + 4.6vw, 4rem);     /* 38 → 64 */
  --hm-h1:       clamp(2rem, 1.4rem + 2.6vw, 3rem);       /* 32 → 48 */
  --hm-h2:       clamp(1.7rem, 1.3rem + 1.7vw, 2.5rem);   /* 27 → 40 */
  --hm-h3:       1.5rem;    /* 24 */
  --hm-h4:       1.25rem;   /* 20 */
  --hm-body-lg:  1.1875rem; /* 19 */
  --hm-body:     1.0625rem; /* 17 */
  --hm-small:    0.875rem;  /* 14 */
  --hm-eyebrow:  0.8125rem; /* 13 */

  --hm-lh-tight:  1.08;
  --hm-lh-snug:   1.18;
  --hm-lh-normal: 1.6;

  --hm-ls-tight:   -0.015em;
  --hm-ls-eyebrow:  0.13em;

  /* ---- Spacing scale (4px base) ---- */
  --hm-s1: 4px;   --hm-s2: 8px;   --hm-s3: 12px;  --hm-s4: 16px;
  --hm-s5: 24px;  --hm-s6: 32px;  --hm-s7: 48px;  --hm-s8: 64px;
  --hm-s9: 96px;  --hm-s10: 128px; --hm-s11: 160px;

  /* ---- Radius (softer than .ai for a friendlier, creative feel) ---- */
  --hm-r-sm:  10px;
  --hm-r-md:  14px;
  --hm-r-lg:  20px;
  --hm-r-xl:  26px;
  --hm-r-pill: 999px;

  /* ---- Borders ---- */
  --hm-hairline: 1px solid var(--hm-border);
  --hm-rule:     1px solid var(--hm-border-strong);

  /* ---- Elevation (warm-tinted, slightly softer than .ai) ---- */
  --hm-shadow-sm: 0 2px 10px rgba(36, 27, 32, 0.06);
  --hm-shadow-md: 0 6px 20px rgba(36, 27, 32, 0.08);
  --hm-shadow-lg: 0 16px 44px rgba(36, 27, 32, 0.11);

  /* ---- Motion ---- */
  --hm-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --hm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hm-dur:      180ms;
  --hm-dur-slow: 320ms;

  /* ---- Layout ---- */
  --hm-maxw:      1080px;
  --hm-maxw-text: 680px;
  --hm-gutter:    clamp(20px, 5vw, 64px);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

.hm-eyebrow {
  font-family: var(--hm-sans);
  font-size: var(--hm-eyebrow);
  font-weight: 600;
  letter-spacing: var(--hm-ls-eyebrow);
  text-transform: uppercase;
  color: var(--hm-primary-text);
}
.hm-eyebrow--teal { color: var(--hm-teal-ink); }

.hm-display {
  font-family: var(--hm-head);
  font-size: var(--hm-display);
  font-weight: 600;
  line-height: var(--hm-lh-tight);
  letter-spacing: var(--hm-ls-tight);
  color: var(--hm-ink);
  text-wrap: balance;
}

.hm-h1 {
  font-family: var(--hm-head);
  font-size: var(--hm-h1);
  font-weight: 600;
  line-height: var(--hm-lh-snug);
  letter-spacing: var(--hm-ls-tight);
  color: var(--hm-ink);
  text-wrap: pretty;
}

.hm-h2 {
  font-family: var(--hm-head);
  font-size: var(--hm-h2);
  font-weight: 600;
  line-height: var(--hm-lh-snug);
  letter-spacing: -0.01em;
  color: var(--hm-ink);
  text-wrap: pretty;
}

.hm-h3 {
  font-family: var(--hm-head);
  font-size: var(--hm-h3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--hm-ink);
}

.hm-h4 {
  font-family: var(--hm-sans);
  font-size: var(--hm-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--hm-ink);
}

.hm-lead {
  font-family: var(--hm-sans);
  font-size: var(--hm-body-lg);
  line-height: var(--hm-lh-normal);
  color: var(--hm-ink-2);
}

.hm-body { font-family: var(--hm-sans); font-size: var(--hm-body); line-height: var(--hm-lh-normal); color: var(--hm-ink-2); }
.hm-small { font-size: var(--hm-small); color: var(--hm-ink-3); }

.hm-pull {
  font-family: var(--hm-head);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--hm-ink);
}