/* =========================================================
   Aguilera Ingenieros — Colors & Type foundations
   ========================================================= */

/* Futura: display headings, wordmark, eyebrows. Brand-supplied.
   Inter: body + UI. Loaded from Google Fonts (body family is unspecified
   in the identity materials; Inter picked for editorial neutrality
   alongside Futura's geometric character). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@font-face {
  font-family: 'Futura AI';
  src: url('fonts/futura.ttf') format('truetype');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura AI';
  src: url('fonts/futura_condensed_bold-webfont.ttf') format('truetype');
  font-weight: 700 900;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}
@font-face {
  font-family: 'Futura AI Condensed';
  src: url('fonts/futura_condensed_bold-webfont.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand palette (sampled from official logo) ---------- */
  --ai-blue:            #005090;   /* primary brand blue — from logo mark */
  --ai-blue-600:        #003C70;   /* hover/pressed — darker shade */
  --ai-blue-800:        #002751;
  --ai-blue-300:        #5A95D0;   /* lifted blue for accents on dark bg */
  --ai-blue-200:        #8FB8E0;
  --ai-navy:            #0D1B2A;   /* dark section background */
  --ai-ink:             #111111;   /* text dark / footer bg */
  --ai-text-dark:       #111111;
  --ai-text-mid:        #555555;
  --ai-text-muted:      #8A8A8A;
  --ai-off-white:       #F5F5F3;   /* light section background */
  --ai-paper:           #FFFFFF;
  --ai-hairline:        #E6E6E2;   /* 1px dividers on light */
  --ai-hairline-dark:   #1E2B3A;   /* 1px dividers on dark */

  /* ---------- Semantic surfaces ---------- */
  --bg:                 var(--ai-paper);
  --bg-alt:             var(--ai-off-white);
  --bg-dark:            var(--ai-navy);
  --bg-deep:            var(--ai-ink);

  --fg:                 var(--ai-text-dark);
  --fg-mid:             var(--ai-text-mid);
  --fg-on-dark:         #F5F5F3;
  --fg-on-dark-mid:     rgba(245,245,243,0.66);

  --accent:             var(--ai-blue);
  --accent-hover:       var(--ai-blue-600);
  --accent-on-dark:     var(--ai-blue-300);   /* use on navy/ink backgrounds */

  /* ---------- Typography — families ---------- */
  --font-display:       'Futura AI Condensed', 'Futura AI', 'Futura', 'Inter', system-ui, sans-serif;
  --font-display-book:  'Futura AI', 'Futura', 'Inter', system-ui, sans-serif;   /* regular-weight Futura for large-but-not-headline moments */
  --font-sans:          'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:          ui-monospace, 'JetBrains Mono', Menlo, monospace;

  /* ---------- Typography — scale (desktop) ---------- */
  --fs-hero:            clamp(56px, 6.5vw, 88px);   /* home hero */
  --fs-display:         clamp(44px, 4.2vw, 64px);   /* page hero */
  --fs-h1:              clamp(36px, 3.2vw, 48px);
  --fs-h2:              clamp(28px, 2.4vw, 36px);
  --fs-h3:              22px;
  --fs-quote:           clamp(28px, 2.6vw, 40px);   /* editorial pull-quote */
  --fs-stat:            64px;                       /* big stat numerals */
  --fs-body-lg:         18px;
  --fs-body:            16px;
  --fs-body-sm:         14px;
  --fs-label:           12px;                       /* eyebrows */
  --fs-micro:           11px;

  /* ---------- Weights ---------- */
  --fw-light:           300;
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;
  --fw-black:           800;

  /* ---------- Line heights ---------- */
  --lh-tight:           1.05;
  --lh-heading:         1.15;
  --lh-body:            1.7;
  --lh-ui:              1.4;

  /* ---------- Tracking ---------- */
  --tr-label:           0.12em;     /* uppercase eyebrows / labels */
  --tr-display:         -0.01em;    /* subtle tighten on display */
  --tr-wide:            0.04em;     /* wordmark-style wide tracking */

  /* ---------- Spacing (8pt base) ---------- */
  --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;
  --sp-11: 160px;

  /* ---------- Radii — keep sharp ---------- */
  --r-0:  0px;      /* default for cards, project tiles, images */
  --r-1:  2px;      /* buttons, pills, form fields */
  --r-pill: 999px;  /* lang toggle, filter pills */

  /* ---------- Borders ---------- */
  --bd-hair:          1px solid var(--ai-hairline);
  --bd-hair-dark:     1px solid var(--ai-hairline-dark);
  --bd-accent-top:    3px solid var(--ai-blue);
  --bd-accent-left:   2px solid var(--ai-blue);

  /* ---------- Shadows (used sparingly — editorial feel) ---------- */
  --shadow-card:      0 1px 2px rgba(17,17,17,0.04), 0 8px 24px rgba(17,17,17,0.06);
  --shadow-card-hover:0 2px 4px rgba(17,17,17,0.06), 0 16px 40px rgba(17,17,17,0.10);
  --shadow-nav:       0 1px 0 rgba(30,43,58,0.6);

  /* ---------- Overlays / gradients ---------- */
  --overlay-hero:     linear-gradient(180deg, rgba(13,27,42,0.15) 0%, rgba(13,27,42,0.85) 100%);
  --overlay-image:    linear-gradient(180deg, rgba(13,27,42,0.0) 40%, rgba(13,27,42,0.70) 100%);

  /* ---------- Motion ---------- */
  --ease-out:         cubic-bezier(.22,.61,.36,1);
  --ease-in-out:      cubic-bezier(.65,0,.35,1);
  --dur-1:            150ms;
  --dur-2:            280ms;
  --dur-3:            500ms;

  /* ---------- Layout ---------- */
  --container:        1360px;
  --gutter:           24px;
  --nav-h:            84px;
}

/* =========================================================
   Semantic element styles — use these classes OR elements
   ========================================================= */

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  color:       var(--fg);
  background:  var(--bg);
}

/* Headings — display family, tracked slightly tight.
   Editorial weight: medium (500) by default. Heavier weights were pulling
   focus away from the imagery and feeling stocky; medium reads as confident
   without being shouty (Foster + Partners cadence). */
h1, .h1, h2, .h2, h3, .h3, .display, .hero {
  font-family: var(--font-display);
  color: inherit;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-heading);
  font-weight: var(--fw-medium);
  margin: 0;
  text-wrap: balance;
}
.hero     { font-size: var(--fs-hero);    line-height: var(--lh-tight); font-weight: var(--fw-medium); }
.display  { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: var(--fw-medium); }
h1, .h1   { font-size: var(--fs-h1); }
h2, .h2   { font-size: var(--fs-h2); }
h3, .h3   { font-size: var(--fs-h3); font-weight: var(--fw-medium); }

/* Eyebrow / tag label — uppercase, wide tracking */
.eyebrow, .label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--on-dark { color: var(--fg-on-dark); }
.eyebrow--muted   { color: var(--fg-mid); }

/* Body variants */
.body-lg { font-size: var(--fs-body-lg); line-height: 1.6; font-weight: var(--fw-light); }
.body    { font-size: var(--fs-body);    line-height: var(--lh-body); }
.body-sm { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--fg-mid); }

/* Editorial pull-quote */
.pullquote {
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--tr-display);
  color: var(--fg);
  text-wrap: pretty;
}
.pullquote em, .pullquote .accent { color: var(--accent); font-style: normal; }

/* Big stat numeral — Futura Book (regular width), not condensed */
.stat-num {
  font-family: var(--font-display-book);
  font-size: var(--fs-stat);
  font-weight: var(--fw-medium);
  letter-spacing: -0.015em;
  line-height: 0.95;
  color: var(--accent);
}
.stat-desc {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  color: var(--fg-mid);
  line-height: 1.5;
}

/* Links — underline on hover, brand blue */
a { color: var(--accent); text-decoration: none; transition: color var(--dur-1) var(--ease-out); }
a:hover { color: var(--accent-hover); }
.link-inline { border-bottom: 1px solid transparent; }
.link-inline:hover { border-bottom-color: currentColor; }

/* Hairline divider */
hr, .rule {
  border: 0;
  border-top: var(--bd-hair);
  margin: 0;
}
.rule--dark { border-top: var(--bd-hair-dark); }
.rule--accent { border-top: 1px solid var(--accent); }

/* Wordmark — brand name rendered in type */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}