/* ============================================================
   The Ambitious Advisor — Colors & Type
   ------------------------------------------------------------
   Brand fonts — both fully self-hosted from fonts/:
     Golos Text — Regular 400, Medium 500, Semibold 600,
                  Bold 700, ExtraBold 800, Black 900
     Plus Jakarta Sans — ExtraLight 200 → ExtraBold 800,
                  all weights with italics
   ============================================================ */

/* Self-hosted Golos Text (brand-supplied) */
@font-face {
  font-family: "Golos Text";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/GolosText-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Golos Text";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/GolosText-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Golos Text";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/GolosText-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Golos Text";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/GolosText-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Golos Text";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/GolosText-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Golos Text";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("fonts/GolosText-Black.ttf") format("truetype");
}

/* Self-hosted Plus Jakarta Sans — full weight range, brand-supplied */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 200; font-style: normal; font-display: swap; src: url("fonts/PlusJakartaSans-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 200; font-style: italic; font-display: swap; src: url("fonts/PlusJakartaSans-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/PlusJakartaSans-Light.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 300; font-style: italic; font-display: swap; src: url("fonts/PlusJakartaSans-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/PlusJakartaSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/PlusJakartaSans-Italic.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/PlusJakartaSans-Medium.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-style: italic; font-display: swap; src: url("fonts/PlusJakartaSans-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/PlusJakartaSans-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-style: italic; font-display: swap; src: url("fonts/PlusJakartaSans-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/PlusJakartaSans-Bold.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-style: italic; font-display: swap; src: url("fonts/PlusJakartaSans-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-style: italic; font-display: swap; src: url("fonts/PlusJakartaSans-ExtraBoldItalic.ttf") format("truetype"); }

:root {
  /* ------ Brand colors (raw) ------ */
  --deep-slate:   #0C0F12;
  --true-blue:    #3853BF;
  --skyline-blue: #5DA2DE;
  --golden-dusk:  #FFB703;
  --soft-cloud:   #F9FBFE;

  /* Tints & shades — Deep Slate */
  --deep-slate-90: #07090b;
  --deep-slate-80: #0a0c0e;
  --deep-slate-20: #3d3f41;
  --deep-slate-40: #6d6f71;
  --deep-slate-60: #9e9fa0;
  --deep-slate-80t: #cecfd0;
  --deep-slate-90t: #e7e7e7;

  /* Tints & shades — True Blue */
  --true-blue-90: #223273;
  --true-blue-80: #2D4299;
  --true-blue-20: #6075cc;
  --true-blue-40: #8898d9;
  --true-blue-60: #afbae5;
  --true-blue-80t: #d7ddf2;
  --true-blue-90t: #ebeef9;

  /* Tints & shades — Skyline Blue */
  --skyline-blue-90: #386185;
  --skyline-blue-80: #4a82b2;
  --skyline-blue-20: #7db5e5;
  --skyline-blue-40: #9ec7eb;
  --skyline-blue-60: #bedaf2;
  --skyline-blue-80t: #dfecf8;
  --skyline-blue-90t: #eff6fc;

  /* Tints & shades — Golden Dusk (brand ramp, guidelines p.15) */
  --golden-dusk-90: #996E02;
  --golden-dusk-80: #CC9202;
  --golden-dusk-20: #FFC535;
  --golden-dusk-40: #FFD468;
  --golden-dusk-60: #FFE29A;
  --golden-dusk-80t: #FFF1CD;
  --golden-dusk-90t: #FFF8E6;

  /* Tints & shades — Soft Cloud */
  --soft-cloud-40: #959798;
  --soft-cloud-20: #c7c9cb;
  --soft-cloud-20t: #fafcfe;
  --soft-cloud-40t: #fbfdfe;
  --soft-cloud-60: #fdfdff;
  --soft-cloud-80: #fefeff;
  --soft-cloud-90: #feffff;

  /* ------ Semantic surfaces ------ */
  --bg:           var(--soft-cloud);     /* default page bg */
  --bg-inverse:   var(--deep-slate);     /* dark sections */
  --bg-muted:     var(--skyline-blue-90t); /* very soft tint */
  --surface:      #ffffff;                /* card surface on light bg */
  --surface-inverse: var(--deep-slate-90); /* card surface on dark bg */

  /* ------ Foreground ------ */
  --fg1:          var(--deep-slate);          /* primary text */
  --fg2:          var(--deep-slate-20);       /* secondary text */
  --fg3:          var(--deep-slate-40);       /* tertiary / captions */
  --fg-inverse-1: var(--soft-cloud);          /* on dark bg */
  --fg-inverse-2: var(--soft-cloud-20);       /* on dark bg, muted */

  /* ------ Accents ------ */
  --accent:        var(--true-blue);     /* brand anchor for emphasis */
  --accent-soft:   var(--skyline-blue);  /* supporting accent */
  --highlight:     var(--golden-dusk);   /* CTA, marks of emphasis */

  /* ------ Border ------ */
  --border:        var(--deep-slate-90t); /* hairlines on light */
  --border-strong: var(--deep-slate-80t);
  --border-inverse: rgba(249, 251, 254, 0.14);

  /* ------ Shadows ------ */
  --shadow-sm: 0 1px 2px rgba(12, 15, 18, 0.06), 0 1px 1px rgba(12, 15, 18, 0.04);
  --shadow-md: 0 4px 12px rgba(12, 15, 18, 0.08), 0 1px 2px rgba(12, 15, 18, 0.05);
  --shadow-lg: 0 18px 40px -12px rgba(12, 15, 18, 0.18), 0 4px 12px rgba(12, 15, 18, 0.06);
  --shadow-blue: 0 14px 32px -10px rgba(56, 83, 191, 0.35);
  --shadow-gold: 0 10px 24px -10px rgba(255, 183, 3, 0.55);

  /* ------ Radii ------ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ------ Spacing scale (4pt) ------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ------ Type families ------ */
  --font-display: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ------ Type scale (per brand guidelines) ------ */
  --h1-size: 60px;   --h1-weight: 600;  --h1-family: var(--font-display);
  --h2-size: 48px;   --h2-weight: 600;  --h2-family: var(--font-display);
  --h3-size: 36px;   --h3-weight: 500;  --h3-family: var(--font-display);
  --h4-size: 24px;   --h4-weight: 500;  --h4-family: var(--font-display);

  --p1-size: 20px;   --p1-weight: 400;  --p1-family: var(--font-body);
  --p2-size: 18px;   --p2-weight: 400;  --p2-family: var(--font-body);
  --p3-size: 16px;   --p3-weight: 300;  --p3-family: var(--font-body);
  --p4-size: 14px;   --p4-weight: 300;  --p4-family: var(--font-body);

  --quote1-size: 24px; /* Plus Jakarta Sans Medium Italic */
  --quote2-size: 18px; /* Plus Jakarta Sans Italic */

  --caption1-size: 18px; /* SemiBold, ALL CAPS, 200px tracking → 0.2em */
  --caption2-size: 16px; /* Regular,  ALL CAPS, 200px tracking → 0.2em */

  --button1-size: 18px;  /* Medium */
  --button2-size: 16px;  /* Medium */

  /* Line heights — display tight, body comfortable */
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.55;
  --lh-tight: 1.3;

  /* Letter spacing tokens */
  --track-caption: 0.2em;   /* 200px tracking equivalent */
  --track-product: 0.01em;  /* product names: 10px @ 1000px = 1% */
}

/* ============================================================
   Base elements
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--p2-size);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; color: var(--fg1); letter-spacing: -0.01em; }
h1 { font-family: var(--h1-family); font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--lh-display); letter-spacing: -0.02em; }
h2 { font-family: var(--h2-family); font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--lh-display); letter-spacing: -0.015em; }
h3 { font-family: var(--h3-family); font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--lh-heading); }
h4 { font-family: var(--h4-family); font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--lh-heading); }

p { margin: 0; }
.p1 { font-size: var(--p1-size); font-weight: var(--p1-weight); }
.p2 { font-size: var(--p2-size); font-weight: var(--p2-weight); }
.p3 { font-size: var(--p3-size); font-weight: var(--p3-weight); }
.p4 { font-size: var(--p4-size); font-weight: var(--p4-weight); }

.quote-1 { font-family: var(--font-body); font-size: var(--quote1-size); font-style: italic; font-weight: 500; line-height: 1.4; }
.quote-2 { font-family: var(--font-body); font-size: var(--quote2-size); font-style: italic; font-weight: 400; line-height: 1.5; }

.caption-1 {
  font-family: var(--font-body);
  font-size: var(--caption1-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caption);
}
.caption-2 {
  font-family: var(--font-body);
  font-size: var(--caption2-size);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-caption);
}

/* Section eyebrow / section number — used heavily in the brand */
.eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caption);
  color: var(--accent);
}

/* Emphasis: True Blue is used to highlight key words within headlines */
.em-blue { color: var(--accent); }
.em-gold { color: var(--highlight); }

/* Product-name lockup */
.product-name {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-product);
  line-height: 1.2;
}
.product-endorsement {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caption);
  font-size: 12px;
}

/* Buttons */
.btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--button1-size);
  border-radius: var(--radius-pill);
  padding: 14px 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 120ms ease, background 160ms ease, color 160ms ease, box-shadow 200ms ease;
  line-height: 1;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--highlight);
  color: var(--deep-slate);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover { background: var(--golden-dusk-80); }

.btn-secondary {
  background: var(--accent);
  color: var(--soft-cloud);
}
.btn-secondary:hover { background: var(--true-blue-80); }

.btn-ghost {
  background: transparent;
  color: var(--fg1);
  border-color: var(--deep-slate);
}
.btn-ghost:hover { background: var(--deep-slate); color: var(--soft-cloud); }

.btn-sm { font-size: var(--button2-size); padding: 10px 18px; }