/* ===========================================================
   Hainzelman Design System — Foundations
   Colors + Type tokens. Import this once in any HTML file.
   =========================================================== */

@font-face {
  font-family: "Source Serif 4";
  src: url("./fonts/SourceSerif4-VariableFont.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("./fonts/SourceSerif4-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("./fonts/Outfit-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   BREAKPOINTS (documentation only)
   Custom properties cannot appear inside @media, so the widths live here
   once and are repeated literally in app.css and in
   js/components/common.js (PHONE_QUERY, DRAWER_QUERY). Keep the three in step.
     phone    (max-width: 599px)  stacked tables, bottom sheets, 16px main pad
     tablet   (max-width: 899px)  sidebar becomes a drawer under a top bar,
                                  two-column grids collapse, 24px main pad
     desktop  900px and up        the reference layout; never overridden
   Desktop-first: every rule inside a query overrides the desktop rule
   above it, so the desktop cascade stays byte-for-byte unchanged.
   ============================================================ */

:root {
  /* ---- BRAND COLORS ----------------------------------------- */
  --hz-purple:        rgb(122, 98, 255);   /* primary brand   #7A62FF */
  --hz-purple-deep:   rgb(127, 86, 217);   /* hover / pressed #7F56D9 */
  --hz-purple-soft:   rgb(202, 192, 255);  /* tint surfaces   #CAC0FF */
  --hz-purple-bright: rgb(147, 128, 255);  /* on-dark headline #9380FF */
  --hz-purple-faint:  rgb(244, 235, 255);  /* lavender wash   #F4EBFF */

  /* ---- INK / SURFACE --------------------------------------- */
  --hz-ink:           rgb(18, 18, 18);     /* near-black body */
  --hz-ink-deep:      rgb(24, 29, 39);     /* dark sections   */
  --hz-ink-soft:      rgb(48, 54, 64);     /* secondary text  */
  --hz-cream:         rgb(244, 242, 239);  /* warm card bg    */
  --hz-paper:         rgb(255, 255, 255);
  --hz-paper-2:       rgb(250, 250, 250);

  /* ---- NEUTRAL TEXT SCALE --------------------------------- */
  --hz-fg-1:          rgb(18, 18, 18);     /* primary text */
  --hz-fg-2:          rgb(83, 88, 98);     /* body */
  --hz-fg-3:          rgb(110, 110, 110);  /* muted / meta */
  --hz-fg-4:          rgb(153, 153, 153);  /* placeholder / disabled */
  --hz-fg-on-dark:    rgb(255, 255, 255);
  --hz-fg-on-dark-2:  rgb(213, 215, 218);

  /* ---- BORDERS / LINES ------------------------------------ */
  --hz-line:          rgb(233, 234, 235);
  --hz-line-strong:   rgb(213, 215, 218);
  --hz-line-on-dark:  rgba(255, 255, 255, 0.14);

  /* ---- SEMANTIC ------------------------------------------- */
  --hz-danger:        rgb(163, 0, 0);
  --hz-success:       rgb(29, 122, 92);
  --hz-warning:       rgb(212, 132, 0);

  /* ---- SHADOWS (Figma 10,13,18 stack) ---------------------- */
  --hz-shadow-xs:  0 1px 2px 0 rgba(10,13,18,0.05);
  --hz-shadow-sm:  0 1px 3px 0 rgba(10,13,18,0.05), 0 1px 2px -1px rgba(10,13,18,0.04);
  --hz-shadow-md:  0 4px 6px -1px rgba(10,13,18,0.05), 0 2px 4px -2px rgba(10,13,18,0.04);
  --hz-shadow-lg:  0 12px 16px -4px rgba(10,13,18,0.08), 0 4px 6px -2px rgba(10,13,18,0.04);
  --hz-shadow-xl:  0 20px 24px -4px rgba(10,13,18,0.10), 0 8px 8px -4px rgba(10,13,18,0.04);
  --hz-shadow-pop: 0 4px 52px 0 rgba(0,0,0,0.25); /* signature card lift on lavender */

  /* ---- RADII ---------------------------------------------- */
  --hz-radius-xs: 6px;
  --hz-radius-sm: 8px;
  --hz-radius-md: 12px;
  --hz-radius-lg: 16px;
  --hz-radius-xl: 24px;
  --hz-radius-pill: 999px;

  /* ---- SPACING (4pt grid) --------------------------------- */
  --hz-space-1: 4px;
  --hz-space-2: 8px;
  --hz-space-3: 12px;
  --hz-space-4: 16px;
  --hz-space-5: 24px;
  --hz-space-6: 32px;
  --hz-space-7: 40px;
  --hz-space-8: 48px;
  --hz-space-9: 64px;
  --hz-space-10: 96px;
  --hz-space-11: 128px;

  /* ---- LAYOUT --------------------------------------------- */
  --hz-topbar-h: 56px;   /* small-screen top bar (drawer mode) */

  /* ---- TYPE FAMILIES -------------------------------------- */
  --hz-serif:    "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --hz-sans:     "Figtree", "Outfit", "Gilroy", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hz-display:  "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --hz-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- TYPE RAMP (semantic) ------------------------------- */
  /* Sizes are fluid: clamp(phone minimum, viewport share, desktop value).
     Each vw term reaches the desktop value at ~900px, so every width from
     the desktop breakpoint up renders exactly the fixed sizes it always had. */
  /* Display / hero — serif, light weight, tight line-height, negative tracking */
  --hz-display-1-size: clamp(64px, 17.8vw, 160px);
  --hz-display-1-lh:   0.94;
  --hz-display-1-track:-0.03em;
  --hz-display-2-size: clamp(56px, 14.2vw, 128px);
  --hz-display-2-lh:   0.94;
  --hz-display-2-track:-0.03em;

  /* Section title (serif, paired with eyebrow) */
  --hz-h1-size: clamp(36px, 8vw, 72px);
  --hz-h1-lh:   1.0;
  --hz-h1-track:-0.03em;
  --hz-h2-size: clamp(30px, 6.25vw, 56px);
  --hz-h2-lh:   1.05;
  --hz-h3-size: clamp(26px, 4.5vw, 40px);
  --hz-h3-lh:   1.1;

  /* Eyebrow — bold sans, ALL CAPS, fat tracking */
  --hz-eyebrow-size:  14px;
  --hz-eyebrow-lh:    24px;
  --hz-eyebrow-track: clamp(2px, 0.67vw, 6px);
  --hz-eyebrow-weight: 700;

  /* Body */
  --hz-body-lg-size: clamp(19px, 2.7vw, 24px);
  --hz-body-lg-lh:   1.4;
  --hz-body-size:    clamp(17px, 2.25vw, 20px);
  --hz-body-lh:      1.6;
  --hz-body-sm-size: 16px;
  --hz-body-sm-lh:   1.5;
  --hz-caption-size: 14px;
  --hz-caption-lh:   1.4;
  --hz-micro-size:   12px;
  --hz-micro-lh:     1.34;

  /* Card label inside a tile (bold sans, key letterspacing 0.5px) */
  --hz-tile-title-size: clamp(19px, 2.7vw, 24px);
  --hz-tile-title-lh:   calc(4 / 3);  /* 32px at the 24px maximum */
  --hz-tile-title-track: 0.5px;
}

/* ============================================================
   Base reset + typography defaults
   ============================================================ */

html, body {
  font-family: var(--hz-sans);
  color: var(--hz-fg-1);
  background: var(--hz-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.hz-display-1, .hz-display-2,
.hz-h1, .hz-h2, .hz-h3 {
  font-family: var(--hz-display);
  font-weight: 400;
  color: var(--hz-ink);
  margin: 0;
  text-wrap: pretty;
}
.hz-display-1 {
  font-size: var(--hz-display-1-size);
  line-height: var(--hz-display-1-lh);
  letter-spacing: var(--hz-display-1-track);
}
.hz-display-2 {
  font-size: var(--hz-display-2-size);
  line-height: var(--hz-display-2-lh);
  letter-spacing: var(--hz-display-2-track);
}
.hz-h1 { font-size: var(--hz-h1-size); line-height: var(--hz-h1-lh); letter-spacing: var(--hz-h1-track); }
.hz-h2 { font-size: var(--hz-h2-size); line-height: var(--hz-h2-lh); letter-spacing: -0.025em; }
.hz-h3 { font-size: var(--hz-h3-size); line-height: var(--hz-h3-lh); letter-spacing: -0.02em; }

.hz-eyebrow {
  font-family: var(--hz-sans);
  font-weight: var(--hz-eyebrow-weight);
  font-size: var(--hz-eyebrow-size);
  line-height: var(--hz-eyebrow-lh);
  letter-spacing: var(--hz-eyebrow-track);
  color: var(--hz-purple);
  text-transform: uppercase;
  margin: 0 0 var(--hz-space-7) 0;
}

.hz-body-lg, .hz-body, .hz-body-sm, .hz-caption, .hz-micro {
  font-family: var(--hz-sans);
  color: var(--hz-fg-2);
  margin: 0;
  text-wrap: pretty;
}
.hz-body-lg {
  font-size: var(--hz-body-lg-size);
  line-height: var(--hz-body-lg-lh);
  font-weight: 300;
  color: var(--hz-ink-deep);
}
.hz-body {
  font-size: var(--hz-body-size);
  line-height: var(--hz-body-lh);
  font-weight: 400;
  color: var(--hz-ink-deep);
}
.hz-body-sm {
  font-size: var(--hz-body-sm-size);
  line-height: var(--hz-body-sm-lh);
}
.hz-caption {
  font-size: var(--hz-caption-size);
  line-height: var(--hz-caption-lh);
  color: var(--hz-fg-3);
}
.hz-micro {
  font-size: var(--hz-micro-size);
  line-height: var(--hz-micro-lh);
  color: var(--hz-fg-3);
}

.hz-tile-title {
  font-family: var(--hz-sans);
  font-weight: 700;
  font-size: var(--hz-tile-title-size);
  line-height: var(--hz-tile-title-lh);
  letter-spacing: var(--hz-tile-title-track);
  color: var(--hz-ink);
}

/* Dark contexts */
.hz-on-dark { color: var(--hz-fg-on-dark); }
.hz-on-dark .hz-eyebrow { color: var(--hz-fg-on-dark); }
.hz-on-dark .hz-display-1,
.hz-on-dark .hz-display-2,
.hz-on-dark .hz-h1,
.hz-on-dark .hz-h2,
.hz-on-dark .hz-h3 { color: var(--hz-fg-on-dark); }
.hz-on-dark .hz-body,
.hz-on-dark .hz-body-lg,
.hz-on-dark .hz-body-sm { color: var(--hz-fg-on-dark-2); }

/* Purple accent for serif headlines on dark backgrounds */
.hz-accent { color: var(--hz-purple-bright); }