/* ============================================================
   AVANT GARDE — Brand foundations
   Source: "ID Avant Garde.pdf" (addbranding, 12/2024)
   ------------------------------------------------------------
   FONTS — brand uses commercial typefaces:
     • Suisse Int'l      (primary / display + text)
     • Simplon BP Mono   (technical labels, ALWAYS UPPERCASE)
   Substituted here with the nearest free Google Fonts:
     • Suisse Int'l     → Hanken Grotesk   (neo-grotesque)
     • Simplon BP Mono  → Spline Sans Mono (technical mono)
   Swap the @import + --font-* vars when the licensed files arrive.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800&family=Spline+Sans+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---- Brand palette (exact from manual) ---- */
  --ag-yellow:      #FFA402;   /* "Bold Light"  · Pantone 124C */
  --ag-grey:        #E5E5E5;   /* "Cinza Tech"  · Cool Grey 1C */
  --ag-black:       #000000;   /* "Preto"       */
  --ag-white:       #FFFFFF;   /* "Branco"      */

  /* ---- Derived tones (harmonized in oklch) ---- */
  --ag-yellow-deep: #E69100;   /* hover / pressed accent      */
  --ag-ink:         #0A0A0A;   /* near-black for body text    */
  --ag-ink-2:       #5C5C5C;   /* secondary text on white     */
  --ag-ink-3:       #8A8A8A;   /* tertiary / captions         */
  --ag-line:        #E3E3E3;   /* hairline borders            */
  --ag-line-soft:   #EFEFEF;   /* faint dividers / grid lines */
  --ag-paper:       #F6F6F4;   /* off-white surface           */
  --ag-grey-2:      #1A1A1A;   /* near-black surface (cards)   */
  --ag-on-dark-2:   #9B9B9B;   /* secondary text on black      */

  /* ---- Type families ---- */
  --font-sans:  'Hanken Grotesk', -apple-system, system-ui, sans-serif;
  --font-mono:  'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; /* the 'ag' descriptor */

  /* ---- Type scale (display = tight neo-grotesque) ---- */
  --display-1: 700 clamp(48px, 8vw, 120px)/0.96 var(--font-sans);
  --display-2: 600 clamp(38px, 5.2vw, 76px)/1.0  var(--font-sans);
  --h1:        600 clamp(32px, 4vw, 54px)/1.04 var(--font-sans);
  --h2:        600 clamp(26px, 2.6vw, 38px)/1.08 var(--font-sans);
  --h3:        600 22px/1.2 var(--font-sans);
  --lead:      400 clamp(18px, 1.5vw, 22px)/1.5 var(--font-sans);
  --body:      400 17px/1.6 var(--font-sans);
  --small:     400 14px/1.55 var(--font-sans);

  /* mono "eyebrow" label — uppercase, spaced */
  --label: 500 12px/1 var(--font-mono);
  --label-tracking: 0.16em;

  /* ---- Spacing rhythm ---- */
  --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 — brand is sharp; corners are small ---- */
  --r-0: 0px; --r-1: 2px; --r-2: 4px; --r-3: 8px;

  /* ---- Shadows — used very sparingly ---- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 14px 40px -18px rgba(0,0,0,.30);

  --maxw: 1280px;
}

/* ---- Semantic helpers ---- */
.ag-label {
  font: var(--label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ag-ink-3);
}
.ag-serif-mark { font-family: var(--font-serif); }