/* =========================================================================
   Estudio AV — Colors & Type
   ARQUITECTURA + VIVENCIAS
   Corrientes, Argentina · September 2025
   ========================================================================= */

/* ------- Web fonts ------------------------------------------------------- */

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/InterDisplay-Thin.otf") format("opentype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("../fonts/InterDisplay-ExtraLight.otf") format("opentype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("../fonts/InterDisplay-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("../fonts/InterDisplay-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("../fonts/InterDisplay-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("../fonts/InterDisplay-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("../fonts/InterDisplay-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("../fonts/InterDisplay-Black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Thin.otf") format("opentype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* Neue Haas Grotesk Display — PRIMARY display face.
   Used for the wordmark, hero claims and any composition that should
   carry the brand voice. The classic Helvetica progenitor.            */
@font-face {
  font-family: "Neue Haas Grotesk Display";
  src: url("../fonts/NeueHaasDisplayThin.ttf") format("truetype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display";
  src: url("../fonts/NeueHaasDisplayLight.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display";
  src: url("../fonts/NeueHaasDisplayRoman.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display";
  src: url("../fonts/NeueHaasDisplayMedium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display";
  src: url("../fonts/NeueHaasDisplayBold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Display";
  src: url("../fonts/NeueHaasDisplayBlack.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* Manrope — HEADINGS and QUOTES.
   Section titles, h2 / h3 / h4, pull quotes, table heads.             */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ------- Tokens ---------------------------------------------------------- */

:root {
  /* ── Brand palette ────────────────────────────────────────────────────
     "Azul" in the brand vocabulary refers to a deep midnight navy
     (sampled from the official PDF logos), NOT a bright blue.
     The bright RGB blues from the ASE file are reserved for digital
     accents, light/screen interfaces, and immersive 3D contexts.        */

  --av-midnight:        #0A1A2A;   /* signature "azul" — primary brand */
  --av-midnight-ink:    #050E18;   /* deep press / overlays */
  --av-midnight-soft:   #1A2B3D;   /* hover, secondary surfaces */

  --av-indigo:          #464EE0;   /* bright RGB blue — digital accent */
  --av-indigo-deep:     #3333CC;   /* press, link visited */
  --av-indigo-print:    #274193;   /* print / formal documents (Pantone P 102-8 C) */
  --av-indigo-mid:      #4453A0;   /* mid-tone, badges */

  /* ── Neutrals — warm-gray bias, no pure black ─────────────────────── */
  --av-black:           #111111;   /* "negro" — text on white when not using midnight */
  --av-graphite:        #2A2F36;
  --av-slate:           #5C6470;
  --av-stone:           #8F8F8A;
  --av-warm-gray:       #C1C1BD;   /* warm neutral from ASE */
  --av-bone:            #EBEBEB;   /* off-white surface */
  --av-paper:           #F4F4F0;   /* warm paper background */
  --av-white:           #FFFFFF;

  /* ── Semantic ──────────────────────────────────────────────────────── */
  --bg:                 var(--av-paper);
  --bg-alt:             var(--av-bone);
  --bg-dark:            var(--av-midnight);
  --bg-dark-alt:        var(--av-midnight-soft);
  --surface:            var(--av-white);
  --surface-sunken:     var(--av-bone);
  --surface-elevated:   var(--av-white);

  --fg:                 var(--av-midnight);     /* primary text on light */
  --fg-muted:           var(--av-slate);
  --fg-subtle:          var(--av-stone);
  --fg-on-dark:         var(--av-white);
  --fg-on-dark-muted:   color-mix(in oklab, var(--av-white) 65%, transparent);

  --accent:             var(--av-midnight);     /* primary accent (brand) */
  --accent-bright:      var(--av-indigo);       /* secondary digital accent */
  --link:               var(--av-midnight);
  --link-hover:         var(--av-indigo);

  --border:             color-mix(in oklab, var(--av-midnight) 10%, transparent);
  --border-strong:      color-mix(in oklab, var(--av-midnight) 22%, transparent);
  --border-on-dark:     color-mix(in oklab, var(--av-white) 14%, transparent);

  /* ── Radius — tight & architectural ───────────────────────────────── */
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  14px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* ── Spacing — 4px base, designed for generous whitespace ─────────── */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;

  /* ── Elevation — minimal, architectural; never glassy ─────────────── */
  --shadow-xs: 0 1px 2px rgba(10, 26, 42, 0.06);
  --shadow-sm: 0 2px 8px rgba(10, 26, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 26, 42, 0.08);
  --shadow-lg: 0 24px 60px rgba(10, 26, 42, 0.12);
  --shadow-key: 0 32px 80px -16px rgba(10, 26, 42, 0.28);

  /* ── Motion ───────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:  140ms;
  --t-med:   240ms;
  --t-slow:  480ms;

  /* ── Type families ────────────────────────────────────────────────── */
  /* Three voices, three jobs:
     - display  → Neue Haas Grotesk Display — wordmark, hero claims, the
                  big brand moments. ("Principal" per the brand owner.)
     - heading  → Manrope — section titles, h2 / h3 / h4, pull quotes,
                  any composed type that isn't body but isn't the hero.
     - body     → Inter — reading copy, captions, UI labels.
     Inter Display kept as a graceful fallback only.                   */
  --font-display: "Neue Haas Grotesk Display", "Inter Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-heading: "Manrope", "Neue Haas Grotesk Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-alt:     var(--font-heading);   /* legacy alias */

  /* ── Type scale ───────────────────────────────────────────────────── */
  --fs-display-2xl: clamp(64px, 8vw, 128px);   /* hero claims */
  --fs-display-xl:  clamp(48px, 6vw, 88px);
  --fs-display-lg:  clamp(40px, 5vw, 64px);
  --fs-display-md:  clamp(32px, 3.6vw, 48px);
  --fs-h1:          40px;
  --fs-h2:          32px;
  --fs-h3:          24px;
  --fs-h4:          20px;
  --fs-h5:          17px;
  --fs-body-lg:     19px;
  --fs-body:        16px;
  --fs-body-sm:     14px;
  --fs-caption:     12px;
  --fs-mono:        13px;
  --fs-overline:    11px;

  /* ── Line heights — tight on display, generous on body ───────────── */
  --lh-display: 0.94;
  --lh-tight:   1.05;
  --lh-snug:    1.15;
  --lh-base:    1.45;
  --lh-relaxed: 1.6;

  /* ── Letter spacing ──────────────────────────────────────────────── */
  --ls-display: -0.035em;
  --ls-tight:   -0.02em;
  --ls-base:    -0.005em;
  --ls-wide:    0.04em;
  --ls-overline: 0.18em;

  /* ── Layout ──────────────────────────────────────────────────────── */
  --container:     1280px;
  --container-wide: 1440px;
  --gutter:        clamp(20px, 4vw, 64px);
}

/* ------- Base ----------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ------- Semantic type roles ------------------------------------------- */

.av-claim,
.t-claim {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display-2xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg);
}
.av-claim em,
.t-claim em {
  font-style: italic;
  font-weight: 300;
  white-space: nowrap;
}

.av-claim strong,
.t-claim strong {
  font-weight: 700;
  font-style: normal;
}

.t-display-xl { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.t-display-lg { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-lg); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.t-display-md { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-md); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }

.t-h1, h1 { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.t-h2, h2 { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.t-h3, h3 { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.t-h4, h4 { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--ls-base); }
.t-h5, h5 { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h5); line-height: var(--lh-snug); letter-spacing: var(--ls-base); }

/* Pull-quote / blockquote — Manrope, light weight, large */
.t-quote, blockquote {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--fs-display-md);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  margin: 0;
  padding: 0;
  border: none;
}
.t-quote em, blockquote em { font-style: italic; font-weight: 300; }

.t-body-lg, .lead { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); letter-spacing: var(--ls-base); color: var(--fg-muted); }
.t-body, p       { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body);    line-height: var(--lh-relaxed); letter-spacing: var(--ls-base); }
.t-body-sm       { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-sm); line-height: var(--lh-base);    letter-spacing: var(--ls-base); }
.t-caption       { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-caption); line-height: var(--lh-base);    letter-spacing: var(--ls-base); color: var(--fg-muted); }
.t-mono          { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-mono);    line-height: 1.4; letter-spacing: 0; }

.t-overline {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-overline);
  line-height: 1;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Wordmark — match the "estudio AV" lockup from the official logo:
   light Neue Haas "estudio" + heavy Black "AV" suffix.
   Note: the SYMBOL is the primary mark; this wordmark is the
   secondary lockup for places where the name needs to be spelled out. */
.av-wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.04em;
  font-size: var(--fs-h2);
  color: var(--fg);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
}
.av-wordmark strong {
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* ------- Utility -------------------------------------------------------- */

.surface-dark {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
}
.surface-dark p,
.surface-dark .lead,
.surface-dark .t-body-lg {
  color: var(--fg-on-dark-muted);
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--t-fast) var(--ease-out), opacity var(--t-fast);
}
a:hover { color: var(--link-hover); }

/* Focus — minimal, accessible */
:focus-visible {
  outline: 2px solid var(--av-indigo);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}