/* ─────────────────────────────────────────────────────────────────
   Argos Data — Color & Type tokens
   Sources: Figma "Argos Data (1).fig" (Manual + Webpage---preview)
   Brand colors confirmed in Manual / Slide 5 ("Argos AI data brand colors")
   ───────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Inter Variable";
  src: url("./fonts/InterVariable.ttf") format("truetype-variations"),
       url("./fonts/InterVariable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* PP Neue Montreal is used SPARINGLY in the source (12× total, only at 12px on
   small UI buttons / pill labels). It's commercial; we substitute Inter at 500
   weight with letter-spacing to approximate. Flagged in README. */

:root {
  /* ───── Brand palette — Light ───── */
  --argos-white:        #FFFFFF;          /* primary background */
  --argos-paper:        #F2F2F0;          /* warm off-white, secondary surface */
  --argos-paper-2:      #E1E1E1;          /* subtle divider / muted swatch */
  --argos-yellow:       #EEE36B;          /* gradient accent — hero highlights only */

  /* ───── Brand palette — Dark ───── */
  --argos-black:        #000000;          /* primary ink, primary buttons */
  --argos-green:        #30AA74;          /* signature accent — CTAs, hero blocks */
  --argos-green-soft:   #3CA276;          /* prompt color in image directions */
  --argos-navy:         #0E1F3E;          /* deep navy, contact / location cards */
  --argos-navy-deep:    #002042;          /* deeper navy used in vector accents */

  /* ───── Greys ───── */
  --argos-grey-900:     #1A1A1A;
  --argos-grey-700:     #4D4D4D;
  --argos-grey-500:     #666666;
  --argos-grey-300:     #D9D9D9;
  --argos-grey-200:     #E1E1E1;
  --argos-grey-100:     #F2F2F0;

  /* ───── Semantic tokens ───── */
  --bg:                 var(--argos-white);
  --bg-alt:             var(--argos-paper);
  --bg-inverse:         var(--argos-black);
  --bg-feature:         var(--argos-green);
  --bg-deep:            var(--argos-navy);

  --fg:                 var(--argos-black);
  --fg-muted:           var(--argos-grey-700);
  --fg-subtle:          var(--argos-grey-500);
  --fg-on-dark:         var(--argos-white);
  --fg-link:            var(--argos-black);

  --border:             var(--argos-black);
  --border-subtle:      var(--argos-grey-300);

  /* Brand gradient — radial yellow into white. Used for hero / contact cards. */
  --argos-gradient-yellow:
    radial-gradient(circle at 50% 50%, #EEE36B 12%, #FFFFFF 100%);
  --argos-gradient-light:
    radial-gradient(circle at 70% 30%, #EEE36B 0%, #FFFFFF 70%);

  /* ───── Type families ───── */
  --font-display:  "Inter Variable", "Inter", system-ui, sans-serif;
  --font-body:     "Inter Variable", "Inter", system-ui, sans-serif;
  --font-ui:       "PP Neue Montreal", "Inter Variable", "Inter", system-ui, sans-serif;

  /* ───── Type scale ─────
     Reduced May 2026: hero menu title was too large in v1, so the
     entire heading scale stepped down one notch. The cascade now
     reads hero → major section → standard section → sub.
     Use these tokens (or the matching px values) for every page. */
  --fs-xs:    12px;     /* PP Neue Montreal pill labels */
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;     /* body / supporting copy on slides */
  --fs-lg:    24px;     /* paragraph at slide scale, eyebrow */
  --fs-xl:    32px;     /* small section heading, card title */
  --fs-2xl:   44px;     /* sub-heading */
  --fs-3xl:   56px;     /* standard section heading (h2) */
  --fs-4xl:   64px;     /* major section heading (Solutions, Platform, Experience, Blog) */
  --fs-display: 72px;   /* final CTA / large restated statements */
  --fs-hero:    84px;   /* page hero h1 — set by user, do not exceed */
  --fs-mega:  250px;    /* full-bleed display ("Typography", "Inter") */

  /* ───── Type weights (Inter Variable) ───── */
  --fw-regular:   400;
  --fw-medium:    500;   /* body / supporting */
  --fw-semibold:  600;   /* headings — "Variable: Weight 600" called out */
  --fw-bold:      700;   /* hero display */

  /* ───── Line heights ───── */
  --lh-tight:    1.05;
  --lh-display:  1.10;   /* the "1.1" line-height seen on every heading */
  --lh-body:     1.40;   /* PP Neue Montreal pill labels: 1.4 */
  --lh-prose:    1.55;

  /* ───── Spacing — mostly multiples of 4/8 in source layouts ───── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-8:  48px;
  --space-10: 64px;
  --space-12: 96px;
  --space-16: 128px;

  /* ───── Radii — pill (37px), card (28px / 48px / 49px), nav (61px) ───── */
  --radius-sm:    8px;
  --radius-md:    16px;
  --radius-lg:    28px;     /* contact / case-study cards */
  --radius-xl:    48px;     /* image masks, large feature cards */
  --radius-pill:  37px;     /* buttons */
  --radius-nav:   61px;     /* top-nav capsule */

  /* ───── Shadows — minimal, mostly flat. Borders carry the weight. ───── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* ─────── Semantic typography classes ─────── */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-prose);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.h-mega, .display-mega {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-mega);
  line-height: var(--lh-display);
  letter-spacing: -0.04em;
}
/* Hero h1 — page-opening headline. 84px is the ceiling. */
.h-hero, h1.hero {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
}
/* Default h1 tracks the hero token so any new page that drops a
   bare <h1> reads at the same scale as the homepage hero. */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
}
/* Major section heading — Solutions, Platform, Experience, Blog. */
.h-section-major, h2.section-major {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-4xl);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0;
}
/* Standard section heading — every other section on long pages. */
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
  margin: 0;
}
/* Final-CTA style: a restated headline larger than a section h2 but
   below the page hero. Used on the closing block. */
.h-display, h2.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
}
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: var(--lh-display);
  margin: 0;
}
p, .p {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-md);
  line-height: var(--lh-display);
  margin: 0;
}
.p-prose {
  font-size: var(--fs-lg);
  line-height: var(--lh-prose);
  font-weight: var(--fw-regular);
}
.label, .ui-label {
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  letter-spacing: 0.01em;
}

/* Pill-style button — used everywhere in the source */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 40px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  line-height: 1.4;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 120ms ease, transform 120ms ease, background 160ms ease;
}
.btn:hover  { opacity: 0.86; }
.btn:active { transform: translateY(1px); }
.btn-primary       { background: var(--argos-black); color: var(--argos-white); }
.btn-on-dark       { background: rgba(255,255,255,0.10); color: var(--argos-white); }
.btn-on-dark:hover { background: rgba(255,255,255,0.18); opacity: 1; }
.btn-ghost         { background: transparent; color: var(--argos-black); border-color: var(--argos-black); }