/* =============================================================
   Cowles Strategic Advisory — Foundation tokens
   Colors, type, spacing, radius, shadow.
   Source of truth: Cowles_Brand_Guide.pdf (Version 1.0 | 2025)
   ============================================================= */

:root {
  /* ---- Brand palette (exact hex from brand guide §3) ----- */
  --csa-navy:  #0C447C;  /* Primary  — dominant brand color */
  --csa-steel: #185FA5;  /* Secondary — supporting */
  --csa-blue:  #378ADD;  /* Accent / interactive */
  --csa-sky:   #B5D4F4;  /* Light tint / backgrounds */
  --csa-mint:  #5DCAA5;  /* Peak accent — used sparingly */

  /* ---- Neutrals --------------------------------------------- */
  --csa-white:    #FFFFFF;
  --csa-ink:      #222222;  /* Body text on light */
  --csa-ink-soft: #444444;  /* Email signature contact line */
  --csa-rule:     #E6ECF3;  /* Subtle dividers (light sky derivative) */
  --csa-paper:    #F7FAFD;  /* Page surface tint */

  /* ---- Phase 3: Brass accent (quantified outcomes only) ---- */
  --csa-brass: #B58B47;

  /* ---- Semantic foreground/background ---------------------- */
  --csa-bg:        var(--csa-white);
  --csa-bg-alt:    var(--csa-paper);
  --csa-bg-dark:   var(--csa-navy);
  --csa-bg-tint:   var(--csa-sky);

  --csa-fg:        var(--csa-ink);       /* default body color */
  --csa-fg-strong: var(--csa-navy);      /* headings on light */
  --csa-fg-muted:  var(--csa-steel);     /* secondary text */
  --csa-fg-soft:   var(--csa-ink-soft);
  --csa-link:      var(--csa-blue);
  --csa-link-hover:var(--csa-mint);      /* §6 — Mint underline on hover */

  --csa-on-dark:        var(--csa-white);
  --csa-on-dark-muted:  var(--csa-sky);
  --csa-on-dark-accent: var(--csa-mint);

  /* ---- Type families (Phase 1) ----------------------------- */
  --csa-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --csa-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --csa-mono:  "IBM Plex Mono", "JetBrains Mono", "Courier New", monospace;

  /* ---- Type scale ------------------------------------------ */
  --csa-fs-h1:        2.25rem;   /* 36px */
  --csa-fs-h2:        clamp(1.75rem, 2.4vw + 1rem, 2.5rem);
  --csa-fs-h3:        1.25rem;   /* 20px */
  --csa-fs-subhead:   0.8125rem; /* 13px — mono, tracked caps */
  --csa-fs-tagline:   1.5rem;    /* 24px */
  --csa-fs-body:      1.125rem;  /* 18px */
  --csa-fs-body-lg:   1.1875rem; /* 19px — hero subhead */
  --csa-fs-body-sm:   0.9375rem; /* 15px */
  --csa-fs-caption:   0.8125rem; /* 13px */
  --csa-fs-mono:      0.875rem;  /* 14px */

  --csa-lh-tight: 1.02;
  --csa-lh-head:  1.15;
  --csa-lh-body:  1.55;
  --csa-lh-prose: 1.65;

  --csa-tracking-caps:    0.14em;
  --csa-tracking-subhead: 0.06em;

  /* ---- Spacing scale (4px base) ---------------------------- */
  --csa-space-1:  0.25rem;
  --csa-space-2:  0.5rem;
  --csa-space-3:  0.75rem;
  --csa-space-4:  1rem;
  --csa-space-5:  1.5rem;
  --csa-space-6:  2rem;
  --csa-space-7:  3rem;
  --csa-space-8:  4rem;
  --csa-space-9:  6rem;

  /* ---- Radii ----------------------------------------------- */
  --csa-radius-sm:  2px;
  --csa-radius-md:  4px;
  --csa-radius-lg:  6px;
  --csa-radius-pill: 999px;

  /* ---- Borders --------------------------------------------- */
  --csa-border:        1px solid var(--csa-rule);
  --csa-border-strong: 1px solid var(--csa-steel);
  --csa-border-navy:   1px solid var(--csa-navy);

  --csa-rule-navy-6:  6px solid var(--csa-navy);
  --csa-rule-steel-1: 1px solid var(--csa-steel);
  --csa-rule-sky-4:   4px solid var(--csa-sky);
  --csa-rule-mint-2:  2px solid var(--csa-mint);

  /* ---- Shadows --------------------------------------------- */
  --csa-shadow-sm: 0 1px 2px rgba(12, 68, 124, 0.06);
  --csa-shadow-md: 0 4px 14px rgba(12, 68, 124, 0.08);
  --csa-shadow-lg: 0 12px 32px rgba(12, 68, 124, 0.12);

  /* ---- Motion ---------------------------------------------- */
  --csa-ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --csa-duration:    180ms;
  --csa-duration-lg: 320ms;

  /* ---- Phase 2: Interactive tokens ------------------------- */
  --csa-focus-ring: 0 0 0 2px var(--csa-paper), 0 0 0 4px var(--csa-mint);
  --csa-underline-thickness: 2px;
  --csa-underline-offset: 4px;
}

/* =============================================================
   Semantic element styles
   ============================================================= */

.csa-h1, h1.csa {
  font-family: var(--csa-serif);
  font-size: var(--csa-fs-h1);
  font-weight: 700;
  line-height: 1.02;
  color: var(--csa-navy);
  letter-spacing: -0.015em;
  margin: 0;
}

.csa-h2, h2.csa {
  font-family: var(--csa-serif);
  font-size: var(--csa-fs-h2);
  font-weight: 700;
  line-height: var(--csa-lh-head);
  color: var(--csa-steel);
  letter-spacing: -0.01em;
  margin: 0;
}

.csa-h3, h3.csa {
  font-family: var(--csa-serif);
  font-size: var(--csa-fs-h3);
  font-weight: 700;
  line-height: var(--csa-lh-head);
  color: var(--csa-navy);
  margin: 0;
}

/* Phase 1: Eyebrow labels use IBM Plex Mono — the visual signature */
.csa-subhead {
  font-family: var(--csa-mono);
  font-size: var(--csa-fs-subhead);
  font-weight: 500;
  color: var(--csa-blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.csa-tagline {
  font-family: var(--csa-serif);
  font-size: var(--csa-fs-tagline);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  color: var(--csa-navy);
}

/* Phase 1: Body text switches to Inter with generous prose leading */
.csa-body, p.csa {
  font-family: var(--csa-sans);
  font-size: var(--csa-fs-body);
  font-weight: 400;
  line-height: var(--csa-lh-prose);
  color: var(--csa-ink);
  text-wrap: pretty;
  margin: 0;
}

.csa-caption {
  font-family: var(--csa-mono);
  font-size: var(--csa-fs-caption);
  color: var(--csa-steel);
  letter-spacing: 0.02em;
}

.csa-mono, code.csa {
  font-family: var(--csa-mono);
  font-size: var(--csa-fs-mono);
}

/* Phase 1: Tracked caps also use mono */
.csa-tracked-caps {
  font-family: var(--csa-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* Phase 1: Prose width constraint */
.csa-prose { max-width: 68ch; }

/* Phase 2: Inline link hover — scaleX draw-in */
a.csa,
.csa-link {
  color: var(--csa-link);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}
a.csa::after,
.csa-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--csa-mint);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--csa-duration) var(--csa-ease);
}
a.csa:hover,
.csa-link:hover {
  color: var(--csa-navy);
}
a.csa:hover::after,
.csa-link:hover::after {
  transform: scaleX(1);
}

.csa-on-dark { color: var(--csa-on-dark); }
.csa-on-dark-muted { color: var(--csa-on-dark-muted); }
.csa-on-dark-accent { color: var(--csa-on-dark-accent); }

/* =============================================================
   Phase 3: Brass metric classes (quantified outcomes only)
   ============================================================= */

.csa-metric {
  font-family: var(--csa-serif);
  font-weight: 700;
  color: var(--csa-brass);
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.csa-metric--lg { font-size: clamp(2.25rem, 3vw + 1rem, 3.25rem); line-height: 1; }
.csa-metric--md { font-size: 1.5rem; line-height: 1.1; }