/* =========================================================================
   Agenté Design System — Colors & Type
   Source: Agente Brand Guidelines V1.0 (March 2026)
   ========================================================================= */

/* --------------------------------- Fonts --------------------------------- */

/* Novela — primary serif (headlines + display). Full family supplied. */
@font-face {
  font-family: "Novela";
  src: url("./fonts/Novela-Regular.woff2") format("woff2"), url("./fonts/Novela-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Novela";
  src: url("./fonts/Novela-RegularItalic.woff2") format("woff2"), url("./fonts/Novela-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Novela";
  src: url("./fonts/Novela-Semibold.woff2") format("woff2"), url("./fonts/Novela-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Novela";
  src: url("./fonts/Novela-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Novela Display — optional optical-size variant for very large display use */
@font-face {
  font-family: "Novela Display";
  src: url("./fonts/Novela-Display.woff2") format("woff2"), url("./fonts/Novela-Display.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* TT Norms — secondary sans (body, UI). Brand spec. Full set supplied. */
@font-face {
  font-family: "TT Norms";
  src: url("./fonts/TTNorms-Regular.woff2") format("woff2"), url("./fonts/TTNorms-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TT Norms";
  src: url("./fonts/TTNorms-Medium.woff2") format("woff2"), url("./fonts/TTNorms-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TT Norms";
  src: url("./fonts/TTNorms-Bold.woff2") format("woff2"), url("./fonts/TTNorms-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TT Norms";
  src: url("./fonts/TTNorms-ExtraBold.woff2") format("woff2"), url("./fonts/TTNorms-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------ Color tokens ----------------------------- */
:root {
  /* ---- Primary palette (3.0) ---- */
  --agente-charcoal:    #364044;   /* PMS 447 C — primary brand dark */
  --agente-ink:         #1a2326;   /* PMS 4 C   — deepest dark / backgrounds */
  --agente-magenta:     #e23694;   /* PMS Rhodamine Red C — signature accent */
  --agente-white:       #ffffff;

  /* ---- Secondary palette (3.1) — muted neutrals ---- */
  --agente-bone:        #f1f2eb;   /* warm off-white surface */
  --agente-stone:       #d8dad3;   /* muted neutral / dividers */

  /* ---- Derived semantic tokens ---- */
  /* Foreground */
  --fg-1: var(--agente-ink);       /* highest emphasis text */
  --fg-2: var(--agente-charcoal);  /* default body text */
  --fg-3: #6b7479;                 /* secondary text (derived) */
  --fg-4: #98a0a4;                 /* tertiary / captions (derived) */
  --fg-on-dark: var(--agente-white);
  --fg-on-dark-2: #b9c0c3;
  --fg-accent: var(--agente-magenta);

  /* Background / surface */
  --bg-page: var(--agente-bone);
  --bg-surface: var(--agente-white);
  --bg-surface-2: var(--agente-stone);
  --bg-inverse: var(--agente-ink);
  --bg-inverse-2: var(--agente-charcoal);

  /* Border */
  --border-subtle: var(--agente-stone);
  --border-strong: var(--agente-charcoal);
  --border-on-dark: rgba(255, 255, 255, 0.12);

  /* Accent */
  --accent: var(--agente-magenta);
  --accent-hover: #c52a82;
  --accent-press: #a82270;
  --accent-soft: #fce5f0;       /* tinted pink wash for backgrounds */

  /* Shadows — subtle, premium / print-feel */
  --shadow-sm: 0 1px 2px rgba(26, 35, 38, 0.06), 0 1px 1px rgba(26, 35, 38, 0.04);
  --shadow-md: 0 6px 16px rgba(26, 35, 38, 0.08), 0 2px 4px rgba(26, 35, 38, 0.04);
  --shadow-lg: 0 18px 40px rgba(26, 35, 38, 0.12), 0 4px 10px rgba(26, 35, 38, 0.06);
  --shadow-focus: 0 0 0 3px rgba(226, 54, 148, 0.28);

  /* Radii — restrained, print-rooted */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

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

  /* ---- Type families ---- */
  --font-serif: "Novela", "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans:  "TT Norms", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-fallback-internal: "Calibri", "Carlito", system-ui, sans-serif;

  /* ---- Type scale (px @1rem=16) ---- */
  --fs-display: 96px;     /* hero/marketing */
  --fs-h1: 64px;
  --fs-h2: 48px;
  --fs-h3: 32px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-body-lg: 18px;
  --fs-body: 18px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-overline: 11px;

  /* ---- Line heights ---- */
  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-overline: 0.18em;
}

/* ----------------------------- Semantic styles --------------------------- */
/* These can be applied as classes (.h1, .body) or extended via @apply-like
   patterns in component CSS. */

.display, .h0 {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-weight: 400;
}

.h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-weight: 400;
}

.h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-weight: 400;
}

.h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  font-weight: 400;
}

.h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.h5, .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  font-weight: 600;
}

.body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  font-weight: 400;
}

.body, p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  font-weight: 400;
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.overline {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  line-height: 1;
  color: var(--fg-2);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  font-weight: 700;
}

/* Print-style label used heavily on signage: stacked all-caps sans */
.signage {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 0.85;
  color: var(--fg-1);
}

/* Tagline / brand line — "ACTING WITH PURPOSE, TRUST & EXPERTISE" */
.tagline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--fg-1);
}

/* ----------------------------- Base resets ----------------------------- */
.agente-base {
  font-family: var(--font-sans);
  color: var(--fg-2);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ------------------------------ Brand logo ----------------------------- */
/* The wordmark art replaces the former CSS text logo. The Reverse (white)
   variant is used in the header and footer, which both sit on dark
   backgrounds. The primary (full-colour) variant lives at
   assets/brand/agente-logo-primary.png for any future use on a light
   background. Sized by height; width auto-scales from the 628x268 art. */
.logo-mark img { display: block; width: auto; height: 48px; max-width: none; }
.footer-brand .logo-mark img { height: 42px; }
@media (max-width: 760px) {
  /* Mobile: flex row so the logo can't be collapsed by the wide CTA pill.
     (The base 3-col grid let .header-right take the logo's 1fr column down
     to 0px once .nav is hidden, which zeroed the image via max-width.) */
  header.header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  header.header .logo-mark { flex: none; }
  .logo-mark img { height: 40px; }
  .footer-brand .logo-mark img { height: 36px; }
}