/* =========================================================================
   MMG AGENT GROWTH LAB, DESIGN SYSTEM (Dark, locked brand spec)
   colors_and_type.css, single source of truth
   ========================================================================= */

/* ---------- Fonts (self-hosted, OFL 1.1) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* ─────────────────────────────────────────────────────────────────────────
     COLOR, locked brand spec (do not deviate)
     ───────────────────────────────────────────────────────────────────────── */

  /* Surfaces */
  --bg:                    #071020;   /* deep navy, page bg */
  --bg-alt:                #0B1A30;   /* section bg alt */
  --bg-card:               #0E2138;   /* card surface (subtle lift) */
  --bg-deep:               #050B17;   /* deepest, footer */

  /* Text */
  --fg:                    #F4F7FC;   /* primary text */
  --fg-2:                  #C5CFDE;   /* secondary text */
  --fg-muted:              #7B8AA1;   /* tertiary / metadata */

  /* Accent, single gold for state, CTA, eyebrows */
  --gold:                  #C9956B;
  --gold-hover:            #DCBA98;
  --gold-tint:             rgba(201, 149, 107, 0.10);
  --gold-glow:             rgba(201, 149, 107, 0.20);

  /* Borders / rules */
  --border:                rgba(197, 207, 222, 0.10);
  --border-strong:         rgba(197, 207, 222, 0.18);

  /* Hero glow overlay */
  --hero-overlay: radial-gradient(75% 45% at 50% 8%, rgba(255, 182, 87, 0.06) 0px, transparent 65%);

  /* Focus ring */
  --focus-ring:            var(--gold);

  /* ─────────────────────────────────────────────────────────────────────────
     TYPE, locked brand spec
     ───────────────────────────────────────────────────────────────────────── */
  --font-display: "Fraunces", "Tiempos Headline", Georgia, serif;
  --font-text:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --t-display:    clamp(56px, 7.5vw, 104px);   /* hero H1 */
  --t-h1:         clamp(40px, 5.0vw, 72px);    /* section opener */
  --t-h2:         clamp(28px, 3.2vw, 44px);    /* sub-section */
  --t-h3:         24px;
  --t-h4:         19px;
  --t-body-lg:    21px;     /* lead */
  --t-body:       19px;     /* default body, spec */
  --t-body-sm:    16px;
  --t-caption:    14px;
  --t-eyebrow:    13px;     /* spec */

  /* Line height */
  --lh-display:   0.98;
  --lh-heading:   1.05;
  --lh-body:      1.75;     /* spec */
  --lh-tight:     1.32;

  /* Tracking, spec: H1 -0.045em / H2 -0.03em / eyebrow 1.04px */
  --tr-display:   -0.045em;
  --tr-h1:        -0.045em;
  --tr-h2:        -0.030em;
  --tr-body:       0em;
  --tr-eyebrow:   1.04px;

  /* Fraunces weight, spec: 400 */
  --w-display: 400;
  --w-display-em: 400;

  /* ─────────────────────────────────────────────────────────────────────────
     SPACING, 8px base; locked section rhythm
     ───────────────────────────────────────────────────────────────────────── */
  --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;

  /* Section padding, spec */
  --section-y-tight: 64px;
  --section-y:       136px;   /* loose default */
  --section-y-hero:  160px;

  /* Containers */
  --container:      1180px;   /* spec */
  --container-text: 760px;
  --container-vsl:  960px;

  /* Radii, restrained */
  --r-0:  0px;
  --r-1:  4px;
  --r-2:  8px;
  --r-3:  14px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.4), inset 0 0 0 1px var(--border);
  --shadow-2: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px var(--border);
  --shadow-gold-btn: 0 4px 24px rgba(201, 149, 107, 0.25), 0 0 60px rgba(201, 149, 107, 0.08);

  /* Motion, restrained */
  --ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* =========================================================================
   SEMANTIC BASE STYLES
   ========================================================================= */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
}

/* Headings, Fraunces 400, tight tracking */
.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-variation-settings: "opsz" 144;
  color: var(--fg);
  text-wrap: balance;
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--t-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-h1);
  font-variation-settings: "opsz" 96;
  color: var(--fg);
  text-wrap: balance;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-h2);
  font-variation-settings: "opsz" 72;
  color: var(--fg);
  text-wrap: balance;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  color: var(--fg);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: var(--lh-tight);
  color: var(--fg);
  margin: 0;
}

/* Body */
p, .p {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0 0 1em 0;
  text-wrap: pretty;
}
.lead {
  font-size: var(--t-body-lg);
  line-height: 1.55;
  color: var(--fg-2);
}
.small, small { font-size: var(--t-body-sm); }
.caption { font-size: var(--t-caption); color: var(--fg-muted); }

/* Eyebrow, numbered section label (mono, uppercase, tracked) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow .num { color: var(--fg-muted); margin-right: 8px; }

/* Proof numerals */
.proof-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  color: var(--gold);
}
.mono { font-family: var(--font-mono); font-size: 0.92em; }

/* Links */
a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--gold-hover); }

/* Selection */
::selection { background: var(--gold); color: var(--bg); }

/* Focus */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Horizontal rule */
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-7) 0;
}