/* ============================================================
   Catalyst•Wayfare — Foundations
   Colors, type, spacing. Import this first in any artifact.
   ============================================================ */

/* ---------- FONTS ---------- */

@font-face {
  font-family: "Yale Street";
  src: url("fonts/Yale-Street.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Yale Street SmallCap";
  src: url("fonts/Yale-SmallCap.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Yale Street Figs";
  src: url("fonts/Yale-StreetFigs.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Yale Admin";
  src: url("fonts/YaleAdmin-Roman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Yale Admin";
  src: url("fonts/YaleAdmin-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Yale Design";
  src: url("fonts/YaleDesign-Roman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Yale Design";
  src: url("fonts/YaleDesign-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---- Semplicita ----
   The brand's primary display sans. Used for headlines that need
   monumental sans presence (report covers, large titles). Light,
   Medium, and Bold weights with matching italics. */
@font-face {
  font-family: "Semplicita";
  src: url("fonts/Semplicita-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Semplicita";
  src: url("fonts/Semplicita-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Semplicita";
  src: url("fonts/Semplicita-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Semplicita";
  src: url("fonts/Semplicita-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Semplicita";
  src: url("fonts/Semplicita-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Semplicita";
  src: url("fonts/Semplicita-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Semplicita Ombra — the stencil-shadow cut. This is the typeface
   used in the formal Catalyst•Wayfare wordmark itself. Reserved
   for stylized brand representation (logo, formal letterhead,
   occasional in-document brand moments). NOT a general display face. */
@font-face {
  font-family: "Semplicita Ombra";
  src: url("fonts/Semplicita-Ombra.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- TOKENS ---------- */

:root {
  /* ---- Brand palette ----
     Deep, regulated, fiduciary. One accent earns its keep.
     The teal is the institutional anchor. Cream is the paper.
     Sage / mint / paper-blue / stone are quiet block tints used to
     compose hard-edged sectional layouts — never gradients. */

  --cw-teal-900:   #133533;   /* primary institutional anchor */
  --cw-teal-800:   #1B3F3C;   /* slightly lifted variant */
  --cw-teal-700:   #28524F;   /* hover / second tier */
  --cw-teal-100:   #C7D5D3;   /* page tint on dark */

  --cw-ink:        #0E1F1E;   /* near-black, almost teal */
  --cw-paper:      #F4F1EA;   /* warm off-white, the "page" */
  --cw-paper-soft: #ECE8DF;   /* secondary paper */

  --cw-mark-blue:  #173B5C;   /* the C•W wordmark blue, used in logo only */

  /* Block tints — the supporting colors for sectional layouts.
     Used flat, edge-to-edge, never as gradients. */
  --cw-sage:       #8C9763;   /* olive / sage block */
  --cw-sage-soft:  #B7C089;
  --cw-mint:       #B9CFC2;   /* mint block */
  --cw-paper-blue: #B7D7DE;   /* paper blue block */
  --cw-stone:      #DCD9D3;   /* light stone neutral */
  --cw-stone-soft: #E8E5DF;

  /* Functional — used sparingly, only where state actually needs it */
  --cw-flag:       #C58A28;   /* the orange "compared to industry" flag */
  --cw-flag-soft:  #E9C079;

  /* ---- Foreground / background semantics ----
     Two surfaces: paper (light) and teal (dark). Use accordingly. */

  --cw-bg:         var(--cw-paper);
  --cw-bg-alt:     var(--cw-paper-soft);
  --cw-bg-invert:  var(--cw-teal-900);

  --cw-fg:         var(--cw-ink);        /* primary type on paper */
  --cw-fg-muted:   #4A5A58;              /* metadata, captions */
  --cw-fg-soft:    #6C7775;              /* hints, fine print */
  --cw-fg-invert:  var(--cw-paper);      /* primary type on teal */
  --cw-fg-invert-muted: #B6C2C0;

  --cw-line:       #1F3D3A;              /* rule, hairline divider */
  --cw-line-soft:  rgba(19,53,51,0.18);
  --cw-line-invert: rgba(244,241,234,0.28);

  /* ---- Type stacks ----
     The brand owns three Yale faces. The substitution fallbacks
     are chosen for closest metrics if the OTFs fail to load. */

  --cw-serif:      "Yale Street", "Yale Street Figs", "Source Serif Pro", "Georgia", serif;
  --cw-sans:       "Yale Admin", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --cw-display:    "Semplicita", "Yale Design", "Inter", system-ui, sans-serif;
  --cw-wordmark:   "Semplicita Ombra", "Semplicita", "Yale Design", serif;
  --cw-smallcap:   "Yale Street SmallCap", "Yale Street", "Source Serif Pro", serif;

  /* ---- Type scale ----
     Editorial cadence. Heads are sentences ending with periods.
     One weight per hierarchy step — restraint reads as confidence. */

  /* 2026-05 adoption: bumped xs 12→15 and sm 14→17 so caption
     copy, eyebrows, footer chrome and tooltip metadata read at a
     comfortable size on 100% zoom. Headlines and body unchanged. */
  --cw-size-xs:    15px;
  --cw-size-sm:    17px;
  --cw-size-base:  16px;
  --cw-size-md:    18px;
  --cw-size-lg:    22px;
  --cw-size-xl:    28px;
  --cw-size-2xl:   38px;
  --cw-size-3xl:   54px;
  --cw-size-4xl:   72px;
  --cw-size-stat:  92px;     /* the "01" "425+" oversize numerals */

  --cw-leading-tight:  1.05;
  --cw-leading-snug:   1.15;
  --cw-leading-body:   1.45;
  --cw-leading-loose:  1.6;

  --cw-track-eyebrow:  0.14em;   /* small-caps section labels */
  --cw-track-tight:    -0.01em;
  --cw-track-normal:   0;

  /* ---- Spacing ---- *
     Generous; whitespace instead of ornament. */
  --cw-space-1:    4px;
  --cw-space-2:    8px;
  --cw-space-3:    12px;
  --cw-space-4:    16px;
  --cw-space-5:    24px;
  --cw-space-6:    32px;
  --cw-space-7:    48px;
  --cw-space-8:    64px;
  --cw-space-9:    96px;

  /* ---- Edges ----
     Hard. Cards are blocks of color, not floating chrome.
     We allow a single small radius for tags and pills only. */
  --cw-radius-0:   0px;        /* default — corners are corners */
  --cw-radius-pill: 999px;     /* for tags / "Buy" pills only */

  /* ---- Shadows / blur ---- */
  --cw-shadow-none:  none;     /* default. The brand has no shadow. */

  /* ---- Rules ---- */
  --cw-rule:       1px solid var(--cw-line);
  --cw-rule-soft:  1px solid var(--cw-line-soft);
  --cw-rule-invert: 1px solid var(--cw-line-invert);
}

/* ---------- BASE ---------- */

html, body {
  background: var(--cw-bg);
  color: var(--cw-fg);
  font-family: var(--cw-sans);
  font-size: var(--cw-size-base);
  line-height: var(--cw-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- SEMANTIC TYPE ----------
   The serif owns titles. The sans owns running text and utility.
   "Yale Design" is reserved for monumental display moments
   (report covers, oversized callouts). */

.cw-display, h1.cw-h1 {
  font-family: var(--cw-display);
  font-weight: 400;
  font-size: var(--cw-size-4xl);
  line-height: var(--cw-leading-tight);
  letter-spacing: var(--cw-track-tight);
  color: var(--cw-fg);
  text-wrap: pretty;
}

h1, .cw-h1 {
  font-family: var(--cw-serif);
  font-weight: 400;
  font-size: var(--cw-size-3xl);
  line-height: var(--cw-leading-tight);
  letter-spacing: var(--cw-track-tight);
  color: var(--cw-fg);
  margin: 0;
  text-wrap: pretty;
}

h2, .cw-h2 {
  font-family: var(--cw-serif);
  font-weight: 400;
  font-size: var(--cw-size-2xl);
  line-height: var(--cw-leading-snug);
  letter-spacing: var(--cw-track-tight);
  color: var(--cw-fg);
  margin: 0;
  text-wrap: pretty;
}

h3, .cw-h3 {
  font-family: var(--cw-serif);
  font-weight: 400;
  font-size: var(--cw-size-xl);
  line-height: var(--cw-leading-snug);
  color: var(--cw-fg);
  margin: 0;
}

h4, .cw-h4 {
  font-family: var(--cw-sans);
  font-weight: 700;
  font-size: var(--cw-size-md);
  line-height: var(--cw-leading-snug);
  color: var(--cw-fg);
  margin: 0;
}

p, .cw-p {
  font-family: var(--cw-sans);
  font-size: var(--cw-size-base);
  line-height: var(--cw-leading-body);
  color: var(--cw-fg);
  margin: 0 0 var(--cw-space-4) 0;
  max-width: 64ch;
  text-wrap: pretty;
}

.cw-lede {
  font-family: var(--cw-serif);
  font-style: italic;
  font-size: var(--cw-size-lg);
  line-height: var(--cw-leading-snug);
  color: var(--cw-fg);
}

/* The signature "Bold lead-in. Short explanation." pattern.
   Use as: <p class="cw-leadin"><b>Editorial, not promotional.</b> Treat the brand like a publication. </p>
   The bold sets the claim; the rest delivers it. */
.cw-leadin {
  font-family: var(--cw-sans);
  font-size: var(--cw-size-base);
  line-height: var(--cw-leading-body);
  color: var(--cw-fg);
}
.cw-leadin b,
.cw-leadin strong {
  font-weight: 700;
  color: var(--cw-fg);
}

/* Eyebrow / section label — small caps, top-left, tracked.
   The PDFs use these in the top-left corner: "SENTIMENT", "AI READINESS". */
.cw-eyebrow {
  font-family: var(--cw-sans);
  font-size: var(--cw-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--cw-track-eyebrow);
  color: var(--cw-fg-muted);
  margin: 0;
}

/* Small caps via the Yale Street SmallCap face — used for the
   logo wordmark setting and refined section labels. */
.cw-smallcap {
  font-family: var(--cw-smallcap);
  font-weight: 400;
  letter-spacing: var(--cw-track-eyebrow);
  text-transform: uppercase;
}

/* The oversize statistic — serif, big, with optional "+" suffix.
   "12+", "$500M+", "425+ pages" — concrete numbers, no qualifiers. */
.cw-stat {
  font-family: var(--cw-serif);
  font-weight: 400;
  font-size: var(--cw-size-stat);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cw-fg);
  display: inline-block;
}
.cw-stat-label {
  font-family: var(--cw-sans);
  font-size: var(--cw-size-sm);
  color: var(--cw-fg-muted);
  margin-top: var(--cw-space-3);
}

/* Numbered phase marker — the giant "01" "02" "03". */
.cw-phase-num {
  font-family: var(--cw-serif);
  font-weight: 400;
  font-size: 84px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cw-fg);
}

/* Inverted (on dark teal) variants */
.cw-on-dark {
  background: var(--cw-bg-invert);
  color: var(--cw-fg-invert);
}
.cw-on-dark h1, .cw-on-dark .cw-h1,
.cw-on-dark h2, .cw-on-dark .cw-h2,
.cw-on-dark h3, .cw-on-dark .cw-h3,
.cw-on-dark p,  .cw-on-dark .cw-p,
.cw-on-dark .cw-stat,
.cw-on-dark .cw-phase-num,
.cw-on-dark .cw-lede {
  color: var(--cw-fg-invert);
}
.cw-on-dark .cw-eyebrow,
.cw-on-dark .cw-fg-muted {
  color: var(--cw-fg-invert-muted);
}

/* Links — quiet, underlined, no color shift unless inverted */
a, .cw-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--cw-line-soft);
  transition: text-decoration-color 120ms ease;
}
a:hover, .cw-link:hover {
  text-decoration-color: var(--cw-fg);
}

/* Rules — the only divider system. Hairline horizontal lines. */
hr, .cw-rule {
  border: 0;
  border-top: var(--cw-rule);
  margin: var(--cw-space-6) 0;
}

/* The middle-dot, promoted to system primitive.
   Use the .cw-dot class on a separator between metadata items,
   or just use the • character — both render at the right weight. */
.cw-dot::before {
  content: "•";
  padding: 0 0.5em;
  color: var(--cw-fg-muted);
  font-weight: 400;
}
.cw-dot-inline {
  display: inline-block;
  padding: 0 0.4em;
  color: var(--cw-fg-muted);
}

/* Tag / pill — used for "Buy" / "Build" classifiers on the roadmap.
   The single radius the brand allows. */
.cw-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--cw-radius-pill);
  background: var(--cw-paper-blue);
  color: var(--cw-ink);
  font-family: var(--cw-sans);
  font-size: var(--cw-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cw-tag--sage { background: var(--cw-sage-soft); }
.cw-tag--mint { background: var(--cw-mint); }
.cw-tag--stone { background: var(--cw-stone); }
.cw-tag--teal { background: var(--cw-teal-900); color: var(--cw-fg-invert); }

/* Highlight — the sage/mint highlighter on inline quotes */
.cw-highlight {
  background: var(--cw-sage-soft);
  padding: 0 0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cw-highlight--mint { background: var(--cw-mint); }
.cw-highlight--blue { background: var(--cw-paper-blue); }