/* ============================================================
   Zastre & Co. — Color & Type Tokens
   Brand: digitally native boutique investment bank.
   Voice: precise, discreet, authoritative. Editorial typography.
   ============================================================ */

/* ============================================================
   @font-face — licensed brand fonts
   Display: Ivy Mode  ·  Body / UI: Helvetica Neue
   ============================================================ */

/* Ivy Mode (display serif) */
@font-face {
  font-family: 'Ivy Mode';
  src: url('../fonts/IvyMode-Thin.woff2') format('woff2'),
       url('../fonts/IvyMode-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ivy Mode';
  src: url('../fonts/IvyMode-ThinItalic.woff2') format('woff2'),
       url('../fonts/IvyMode-ThinItalic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ivy Mode';
  src: url('../fonts/IvyMode-Light.woff2') format('woff2'),
       url('../fonts/IvyMode-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ivy Mode';
  src: url('../fonts/IvyMode-LightItalic.woff2') format('woff2'),
       url('../fonts/IvyMode-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ivy Mode';
  src: url('../fonts/IvyMode-Regular.woff2') format('woff2'),
       url('../fonts/IvyMode-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ivy Mode';
  src: url('../fonts/IvyMode-Italic.woff2') format('woff2'),
       url('../fonts/IvyMode-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ivy Mode';
  src: url('../fonts/IvyMode-SemiBold.woff2') format('woff2'),
       url('../fonts/IvyMode-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ivy Mode';
  src: url('../fonts/IvyMode-SemiBoldItalic.woff2') format('woff2'),
       url('../fonts/IvyMode-SemiBoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ivy Mode';
  src: url('../fonts/IvyMode-Bold.woff2') format('woff2'),
       url('../fonts/IvyMode-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ivy Mode';
  src: url('../fonts/IvyMode-BoldItalic.woff2') format('woff2'),
       url('../fonts/IvyMode-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Helvetica Neue (sans body / UI) */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueUltraLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueUltraLightItalic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueThin.otf') format('opentype');
  font-weight: 250;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueThinItalic.otf') format('opentype');
  font-weight: 250;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueLightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueRoman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueMedium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueMediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueBoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueHeavy.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueHeavyItalic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueBlack.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueBlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ----------------------------------------------------------
     COLORS — Brand
     The official Zastre & Co. palette is intentionally narrow:
     three colors. No tints, no semantic accents, no greens
     or reds. Restraint IS the brand.

     Blue   —  #1F2E43   primary; type, navbar, CTA, deep sections
     Gold   —  #C7BEAD   warm tan; watermarks, plates, highlights
     Gray   —  #F2F1EC   warm cream; section backgrounds, cards
     ---------------------------------------------------------- */
  --c-blue:        #1F2E43;            /* rgb(31, 46, 67)   — primary */
  --c-gold:        #C7BEAD;            /* rgb(199, 190, 173) — accent */
  --c-gray:        #F2F1EC;            /* rgb(242, 241, 236) — surface */

  --c-white:       #FFFFFF;
  --c-black:       #000000;

  /* ----- Aliases for legacy refs (do not introduce new colors) -----
     These all collapse onto the three brand tones. */
  --c-navy:        var(--c-blue);
  --c-stone:       var(--c-gray);
  --c-tan:         var(--c-gold);

  /* Tonal text/rule values are derived from the brand blue at
     reduced opacity so they read as one family — not new colors. */
  --c-blue-80:     rgba(31, 46, 67, 0.80);   /* body text */
  --c-blue-60:     rgba(31, 46, 67, 0.60);   /* secondary text */
  --c-blue-40:     rgba(31, 46, 67, 0.40);   /* placeholder */
  --c-blue-20:     rgba(31, 46, 67, 0.20);   /* hairline rule */
  --c-blue-10:     rgba(31, 46, 67, 0.10);   /* faintest divider */

  /* Inverse ramps for use on Blue surfaces. */
  --c-on-blue:        var(--c-white);
  --c-on-blue-muted:  rgba(255, 255, 255, 0.70);
  --c-on-blue-rule:   rgba(255, 255, 255, 0.18);

  /* ----- Semantic tokens ------------------------------------ */
  --bg:            var(--c-white);
  --bg-alt:        var(--c-gray);
  --bg-deep:       var(--c-blue);
  --fg:            var(--c-blue);
  --fg-muted:      var(--c-blue-60);
  --fg-on-deep:    var(--c-on-blue);
  --fg-on-deep-muted: var(--c-on-blue-muted);
  --rule:          var(--c-blue-20);
  --rule-soft:     var(--c-blue-10);

  /* Legacy aliases retained for older preview cards / kit JSX */
  --c-navy-700:    var(--c-blue);
  --c-navy-500:    var(--c-blue-60);
  --c-navy-300:    var(--c-blue-40);
  --c-stone-200:   var(--c-gray);
  --c-stone-300:   var(--c-blue-20);

  /* ----------------------------------------------------------
     TYPE — Display serif + sans body
     Display:  Ivy Mode          (licensed; .woff2 in fonts/)
     Body/UI:  Helvetica Neue    (licensed; .otf  in fonts/)
     ---------------------------------------------------------- */
  --font-display: 'Ivy Mode', 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-editorial: 'Ivy Mode', 'Newsreader', Georgia, serif;
  --font-sans: 'Helvetica Neue', 'Helvetica', 'Inter', system-ui, sans-serif;

  --fw-thin:    100;
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Sizes — driven by Figma source-of-truth */
  --fs-display-xl: 64px;   /* hero: "Elite Capital Advisory…" */
  --fs-display-l:  52px;   /* section: "About Us", "Service Offering" */
  --fs-display-m:  36px;
  --fs-display-s:  26px;
  --fs-pull:       32px;
  --fs-lead:       24px;
  --fs-body-l:     20px;
  --fs-body:       18px;
  --fs-small:      16px;
  --fs-micro:      14px;

  --lh-display: 1.3;
  --lh-body:    1.3;
  --lh-tight:   1;

  --ls-eyebrow: 0.18em;
  --ls-display: -0.005em;

  /* Spacing (8-pt scale, with editorial wide gutters) */
  --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;

  --gutter:  64px;     /* page edge */
  --maxw:    1312px;   /* content cap (1440 - 64*2) */

  /* Radius / shadow / motion */
  --radius-0: 0;
  --radius-1: 1px;
  --radius-2: 2px;        /* the system is essentially square */

  --border-thin: 1px solid var(--c-blue);
  --border-rule: 1px solid var(--rule);
  --border-rule-soft: 1px solid var(--rule-soft);

  --shadow-card: 0 1px 0 rgba(31,46,67,0.06), 0 18px 40px -28px rgba(31,46,67,0.20);
  --shadow-deep: 0 24px 60px -32px rgba(0,0,0,0.45);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 520ms;
}

/* ============================================================
   Semantic typography utilities
   ============================================================ */
.zc-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: 12px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.zc-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  margin: 0;
}

.zc-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display-l);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  margin: 0;
}

.zc-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display-m);
  line-height: var(--lh-display);
  color: var(--fg);
  margin: 0;
}

.zc-pull {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-pull);
  line-height: var(--lh-display);
  color: var(--fg-on-deep-muted);
}

.zc-lead {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.zc-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

.zc-body-strong {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  color: var(--fg);
}

.zc-nav {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: 1;
  color: var(--fg);
}

.zc-mono-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ============================================================
   Components — buttons & rules
   ============================================================ */
.zc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: 1;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--fg);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.zc-btn:hover { background: var(--c-blue); color: var(--c-white); }
.zc-btn:active { transform: translateY(0.5px); }

.zc-btn--inverse {
  color: var(--c-white);
  border-color: var(--c-white);
}
.zc-btn--inverse:hover { background: var(--c-white); color: var(--c-blue); }

.zc-btn--solid {
  background: var(--c-blue);
  color: var(--c-white);
  border-color: var(--c-blue);
}
.zc-btn--solid:hover { background: transparent; color: var(--c-blue); }

.zc-rule {
  display: block;
  height: 1px;
  background: var(--rule);
  border: 0;
}

.zc-rule--soft { background: var(--rule-soft); }
.zc-rule--inverse { background: rgba(255,255,255,0.18); }