/* ================================================================
   Heztio — Design Tokens (v2)
   ----------------------------------------------------------------
   Tokens derived from the official Heztio Brandbook 2026.

   Brand colors (from spec):
     Navy 1         #001830   deepest navy, used in gradient sweep
     Navy 2         #012e54   primary brand navy — Pantone 2965 C
     Pink           #f086a8   primary accent     — Pantone 1895 C
     Gradient                 blue → pink (linear)

   Fonts (from spec):
     Primaria       Causten Family   (licensed; files in /fonts)
     Secundaria     Montserrat Family (Google Fonts)
     Mono           JetBrains Mono   (Google Fonts)
   ================================================================ */

/* Secondary (Montserrat) + Mono (JetBrains Mono) via Google Fonts.
   A CSS @import must precede @font-face and all other rules, so it lives here. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* Causten — primary brand family, full weight range + obliques.
   Files live in /fonts at the project root. */
@font-face { font-family: 'Causten'; font-style: normal;  font-weight: 100; font-display: swap; src: url('fonts/Causten-Thin.otf')             format('opentype'); }
@font-face { font-family: 'Causten'; font-style: italic;  font-weight: 100; font-display: swap; src: url('fonts/Causten-ThinOblique.otf')      format('opentype'); }
@font-face { font-family: 'Causten'; font-style: normal;  font-weight: 200; font-display: swap; src: url('fonts/Causten-ExtraLight.otf')       format('opentype'); }
@font-face { font-family: 'Causten'; font-style: italic;  font-weight: 200; font-display: swap; src: url('fonts/Causten-ExtraLightOblique.otf')format('opentype'); }
@font-face { font-family: 'Causten'; font-style: normal;  font-weight: 300; font-display: swap; src: url('fonts/Causten-Light.otf')            format('opentype'); }
@font-face { font-family: 'Causten'; font-style: italic;  font-weight: 300; font-display: swap; src: url('fonts/Causten-LightOblique.otf')     format('opentype'); }
@font-face { font-family: 'Causten'; font-style: normal;  font-weight: 400; font-display: swap; src: url('fonts/Causten-Regular.otf')          format('opentype'); }
@font-face { font-family: 'Causten'; font-style: italic;  font-weight: 400; font-display: swap; src: url('fonts/Causten-RegularOblique.otf')   format('opentype'); }
@font-face { font-family: 'Causten'; font-style: normal;  font-weight: 500; font-display: swap; src: url('fonts/Causten-Medium.otf')           format('opentype'); }
@font-face { font-family: 'Causten'; font-style: italic;  font-weight: 500; font-display: swap; src: url('fonts/Causten-MediumOblique.otf')    format('opentype'); }
@font-face { font-family: 'Causten'; font-style: normal;  font-weight: 600; font-display: swap; src: url('fonts/Causten-SemiBold.otf')         format('opentype'); }
@font-face { font-family: 'Causten'; font-style: italic;  font-weight: 600; font-display: swap; src: url('fonts/Causten-SemiBoldOblique.otf')  format('opentype'); }
@font-face { font-family: 'Causten'; font-style: normal;  font-weight: 700; font-display: swap; src: url('fonts/Causten-Bold.otf')             format('opentype'); }
@font-face { font-family: 'Causten'; font-style: italic;  font-weight: 700; font-display: swap; src: url('fonts/Causten-BoldOblique.otf')      format('opentype'); }
@font-face { font-family: 'Causten'; font-style: normal;  font-weight: 800; font-display: swap; src: url('fonts/Causten-ExtraBold.otf')        format('opentype'); }
@font-face { font-family: 'Causten'; font-style: italic;  font-weight: 800; font-display: swap; src: url('fonts/Causten-ExtraBoldOblique.otf') format('opentype'); }
@font-face { font-family: 'Causten'; font-style: normal;  font-weight: 900; font-display: swap; src: url('fonts/Causten-Black.otf')            format('opentype'); }
@font-face { font-family: 'Causten'; font-style: italic;  font-weight: 900; font-display: swap; src: url('fonts/Causten-BlackOblique.otf')     format('opentype'); }

:root {
  /* ============== BRAND COLORS ============== */
  /* The two navies + one pink that drive everything */
  --hz-navy-deep:  #001830;        /* Navy 1 — backgrounds, gradient sweep */
  --hz-navy:       #012e54;        /* Navy 2 — PRIMARY brand color, Pantone 2965 C */
  --hz-pink:       #f086a8;        /* PRIMARY accent, Pantone 1895 C */
  --hz-white:      #FFFFFF;

  /* Navy scale — derived from #012e54, for UI surfaces and text */
  --hz-navy-900:  #001830;         /* = --hz-navy-deep */
  --hz-navy-800:  #012e54;         /* = --hz-navy (★ primary) */
  --hz-navy-700:  #0a3d6b;
  --hz-navy-600:  #154e85;
  --hz-navy-500:  #2962a0;

  /* Pink scale — derived from #f086a8 */
  --hz-pink-900:  #7a2e48;
  --hz-pink-700:  #c25a82;
  --hz-pink-500:  #f086a8;         /* ★ accent */
  --hz-pink-300:  #f8b3c8;
  --hz-pink-100:  #fde0e8;
  --hz-pink-50:   #fef3f6;

  /* Signature gradient — blue → pink, as on the brand banner */
  --hz-gradient-brand:
    linear-gradient(105deg,
      #001830 0%,
      #012e54 22%,
      #2b3f7e 45%,
      #8a4d8a 68%,
      #d76b8e 86%,
      #f086a8 100%);

  /* Radial sweep variant — used behind hero copy / deck title slides */
  --hz-gradient-sweep:
    radial-gradient(ellipse 70% 80% at 25% 50%, #1b3a7a 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 80% 60%, #f086a8 0%, transparent 60%),
    linear-gradient(180deg, #001830, #012e54);

  /* Soft pink wash — used for stickers, badges, secondary surfaces */
  --hz-gradient-pink:
    linear-gradient(180deg, #f086a8 0%, #d76b8e 100%);

  /* ============== NEUTRALS (cool slate, tuned to navy) ============== */
  --hz-slate-50:   #F4F7FB;
  --hz-slate-100:  #E7ECF4;
  --hz-slate-200:  #D2DAE7;
  --hz-slate-300:  #B3BFD2;
  --hz-slate-400:  #8794AE;
  --hz-slate-500:  #5E6D89;
  --hz-slate-600:  #42526E;
  --hz-slate-700:  #2C3A52;
  --hz-slate-800:  #15243C;
  --hz-slate-900:  #001830;

  --hz-paper:  #F7F9FC;            /* page bg, slightly cool */
  --hz-ink:    #012e54;            /* alias of navy */

  /* ============== SEMANTIC ============== */
  --hz-success-50:  #E5F5EE;
  --hz-success-500: #1E9F6E;
  --hz-success-700: #136F4C;

  --hz-warning-50:  #FFF3DC;
  --hz-warning-500: #E69423;
  --hz-warning-700: #9C610E;

  --hz-danger-50:   #FDE9EF;       /* re-uses pink tone, friendlier than red */
  --hz-danger-500:  #D14868;       /* deeper pink for status, not the accent */
  --hz-danger-700:  #8B2643;

  --hz-info-50:     #E1ECF8;
  --hz-info-500:    #154e85;       /* re-uses navy-600 */
  --hz-info-700:    #0a3d6b;

  /* ============== SEMANTIC ROLES ============== */
  --fg-1: var(--hz-navy);          /* primary text, headlines */
  --fg-2: var(--hz-slate-700);     /* secondary text, body */
  --fg-3: var(--hz-slate-500);     /* muted, captions, meta */
  --fg-4: var(--hz-slate-400);     /* disabled, placeholder */
  --fg-on-brand: var(--hz-white);  /* on navy / on gradient / on pink */

  --bg-1: var(--hz-white);         /* surface */
  --bg-2: var(--hz-paper);         /* page background */
  --bg-3: var(--hz-slate-50);      /* subtle fill */
  --bg-4: var(--hz-slate-100);     /* hover fill */
  --bg-brand:   var(--hz-navy);
  --bg-accent:  var(--hz-pink);
  --bg-gradient: var(--hz-gradient-brand);

  --border-1: var(--hz-slate-200); /* hairline */
  --border-2: var(--hz-slate-300); /* stronger */
  --border-focus: var(--hz-pink);  /* focus ring uses the brand pink */

  /* ============== ELEVATION ============== */
  --shadow-xs: 0 1px 2px rgba(1, 24, 48, 0.06);
  --shadow-sm: 0 1px 3px rgba(1, 24, 48, 0.08), 0 1px 2px rgba(1, 24, 48, 0.04);
  --shadow-md: 0 4px 12px rgba(1, 24, 48, 0.10), 0 2px 4px rgba(1, 24, 48, 0.04);
  --shadow-lg: 0 12px 32px rgba(1, 24, 48, 0.14), 0 4px 8px rgba(1, 24, 48, 0.06);
  --shadow-xl: 0 24px 56px rgba(1, 24, 48, 0.20), 0 8px 16px rgba(1, 24, 48, 0.08);
  --shadow-focus: 0 0 0 4px rgba(240, 134, 168, 0.32);  /* pink halo */

  /* ============== RADII ============== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ============== SPACING (4pt base) ============== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ============== TYPE FAMILIES ==============
     Primary  = Causten (Latinotype). Loaded via @font-face at the
                top of this file from /fonts.
     Secondary = Montserrat (per brand book — used for short
                 display moments, eyebrows, SIMPLE-style chips).
     Mono     = JetBrains Mono (codes, IDs, unit numbers).
  ================================================================ */
  --font-primary:   'Causten', 'Helvetica Neue', Arial, sans-serif;
  --font-secondary: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'Menlo', monospace;

  /* Aliases kept for backwards compatibility with v1 of this file. */
  --font-display: var(--font-secondary);
  --font-sans:    var(--font-primary);

  /* ============== TYPE SCALE ============== */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;
  --text-6xl:  64px;
  --text-7xl:  84px;

  /* ============== MOTION ============== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    320ms;
}

/* ================================================================
   H-mark tile pattern — repeating background found throughout
   the brandbook. Use as a subtle texture on navy or pink surfaces.
   ================================================================ */
.hz-pattern {
  background-color: var(--hz-navy);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'><g fill='none' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.06'><path d='M22 26 h12 v18 l8 -8 v-10 h12 v40 h-12 v-18 l-8 8 v10 h-12 z'/><path d='M77 71 h12 v18 l8 -8 v-10 h12 v40 h-12 v-18 l-8 8 v10 h-12 z' transform='translate(-55 -55)'/></g></svg>");
}
.hz-pattern--pink {
  background-color: var(--hz-pink);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'><g fill='none' stroke='%23012e54' stroke-width='2' stroke-opacity='0.16'><path d='M22 26 h12 v18 l8 -8 v-10 h12 v40 h-12 v-18 l-8 8 v10 h-12 z'/></g></svg>");
}

/* ================================================================
   Semantic typography styles
   --------------------------------------------------------------
   The wordmark is "HEZTIO" in a heavy geometric sans (Causten /
   Manrope). The brand voice is bold: large, tightly-tracked,
   often UPPERCASE display copy with a lighter UI workhorse
   underneath. Montserrat shows up on eyebrows, chips, and
   the small "SIMPLE" badge in the lockup.
   ================================================================ */

.hz-display-1 {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: var(--text-7xl);
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--fg-1);
  text-transform: uppercase;
}
.hz-display-2 {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: var(--text-6xl);
  letter-spacing: -0.02em;
  line-height: 1.0;
  color: var(--fg-1);
  text-transform: uppercase;
}
.hz-h1 {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: var(--text-5xl);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fg-1);
}
.hz-h2 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--text-4xl);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--fg-1);
}
.hz-h3 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--fg-1);
}
.hz-h4 {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--fg-1);
}
.hz-eyebrow {
  /* The "BRANDBOOK 2026" / "HEZTIO" small-caps treatment from the spec.
     Always Montserrat, generous tracking, uppercase. */
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fg-3);
}
.hz-body-lg {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}
.hz-body {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}
.hz-body-sm {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-2);
}
.hz-caption {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--fg-3);
}
.hz-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: -0.01em;
}
/* The "SIMPLE" word in the lockup — Montserrat, ExtraBold, tracked, uppercase. */
.hz-tag {
  font-family: var(--font-secondary);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Render text in the brand gradient (blue → pink). */
.hz-text-gradient {
  background: var(--hz-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}