/* ===========================================================
   Capstone Consulting — Design Tokens
   Colors + Typography (base + semantic)
   =========================================================== */

/* --- Brand fonts (Montserrat — uploaded variable fonts) ----- */
/* Display + Body: Montserrat (variable, 100–900). Replaces prior
   Oswald + Source Sans 3 substitutes — a single-family system that
   reads modern, geometric, professional, and friendly at all weights. */
/* Accent serif: Lora (Google Fonts) retained for testimonial italics —
   FLAG to user: replace with brand serif when supplied. */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;1,500&display=swap");

:root {
  /* ===== Brand palette =====
     Sampled from logo. Capstone navy is the hero, paired with
     a dark slate (the "stone" half of the mark) and crisp white. */
  --cap-navy-900: #00203F;   /* darkest, headlines */
  --cap-navy-800: #003070;
  --cap-navy-700: #004080;   /* primary brand blue */
  --cap-navy-600: #005090;   /* logo blue */
  --cap-navy-500: #1568AE;   /* hover/lift */
  --cap-navy-400: #4D8DC9;
  --cap-navy-300: #8FB7DB;
  --cap-navy-200: #C9DCEC;
  --cap-navy-100: #E8F0F8;   /* tinted bg */
  --cap-navy-050: #F4F8FC;   /* page wash */

  --cap-slate-900: #1A1A1A;
  --cap-slate-800: #2B2B2B;
  --cap-slate-700: #404040;  /* logo dark slate */
  --cap-slate-600: #5A5A5A;
  --cap-slate-500: #777777;
  --cap-slate-400: #9A9A9A;
  --cap-slate-300: #BFBFBF;
  --cap-slate-200: #DCDCDC;
  --cap-slate-100: #EDEDED;
  --cap-slate-050: #F6F6F6;

  --cap-white:     #FFFFFF;
  --cap-black:     #0A0A0A;

  /* Energetic accents — used sparingly to express "fun training" */
  --cap-sun:       #F5B622;   /* warm gold — highlights, awards */
  --cap-coral:     #E96A4D;   /* warm coral — CTAs, energy */
  --cap-leaf:      #4FA978;   /* success / outdoor */
  --cap-sky:       #6BB6E0;   /* light, playful */

  /* Semantic */
  --cap-success:   #2E8C57;
  --cap-warning:   #D89512;
  --cap-danger:    #C0392B;
  --cap-info:      var(--cap-navy-600);

  /* ===== Foreground / background tokens ===== */
  --fg-1: var(--cap-slate-900);   /* primary text */
  --fg-2: var(--cap-slate-700);   /* body */
  --fg-3: var(--cap-slate-500);   /* muted */
  --fg-4: var(--cap-slate-400);   /* placeholder */
  --fg-on-brand: var(--cap-white);

  --bg-1: var(--cap-white);          /* page */
  --bg-2: var(--cap-navy-050);       /* subtle wash */
  --bg-3: var(--cap-slate-050);      /* card alt */
  --bg-brand: var(--cap-navy-700);   /* hero panels */
  --bg-brand-deep: var(--cap-navy-900);

  --border-1: var(--cap-slate-200);
  --border-2: var(--cap-slate-300);
  --border-brand: var(--cap-navy-600);

  /* ===== Typography stacks ===== */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-accent:  "Lora", "Georgia", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* ===== Type scale (modular ~1.25) ===== */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    21px;
  --fs-xl:    26px;
  --fs-2xl:   32px;
  --fs-3xl:   42px;
  --fs-4xl:   56px;
  --fs-5xl:   72px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;  /* eyebrow / labels */

  /* ===== Spacing (4px 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;

  /* ===== Radii ===== */
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  10px;
  --r-xl:  16px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ===== Elevation / shadow ===== */
  --shadow-1: 0 1px 2px rgba(0, 32, 63, 0.06), 0 1px 1px rgba(0, 32, 63, 0.04);
  --shadow-2: 0 4px 12px rgba(0, 32, 63, 0.08), 0 1px 2px rgba(0, 32, 63, 0.05);
  --shadow-3: 0 10px 24px rgba(0, 32, 63, 0.12), 0 2px 6px rgba(0, 32, 63, 0.06);
  --shadow-4: 0 24px 48px rgba(0, 32, 63, 0.18), 0 4px 12px rgba(0, 32, 63, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5);
  --ring-focus: 0 0 0 3px rgba(0, 80, 144, 0.35);

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 500ms;

  /* ===== Layout ===== */
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1180px;
  --container-xl: 1320px;
}

/* ===========================================================
   Semantic typography classes — drop-in for components
   =========================================================== */

html, body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-transform: uppercase;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-transform: uppercase;
  margin: 0 0 var(--sp-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}

h5, .h5 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0 0 var(--sp-4);
}

.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--cap-navy-600);
}

.quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.caption, small {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--cap-slate-100);
  color: var(--cap-navy-800);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}

a {
  color: var(--cap-navy-600);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
a:hover { color: var(--cap-navy-700); border-bottom-color: currentColor; }
a:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 2px; }

/* Selection styled to brand */
::selection { background: var(--cap-navy-200); color: var(--cap-navy-900); }