/* ============================================================
   Step 4 Consulting — Design Tokens
   ============================================================

   A geometric, high-contrast, diagrammatic system for an AI-
   readiness consultancy. Black ink on cream paper, with a single
   amber accent echoing the upward arrow in the logo.

   Font substitutions (flagged — confirm with client):
     - Display / Wordmark  → Jost        (Futura-family match)
     - Body serif          → Source Serif 4
     - Body sans / UI      → Inter Tight
     - Mono                → JetBrains Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ----------------------------------------------------------
     COLOR — Base
     ---------------------------------------------------------- */
  --s4-ink:        #0E0E0E;   /* primary fg; near-black */
  --s4-graphite:   #3D3D3A;   /* secondary text, diagram strokes */
  --s4-ash:        #8A8A85;   /* tertiary / metadata */
  --s4-rule:       #D9D7CF;   /* hairlines, borders, card outlines */
  --s4-paper:      #FAFAF7;   /* primary bg; warm off-white */
  --s4-paper-2:    #F3F1E9;   /* subtle panel, table zebra */
  --s4-paper-3:    #EAE7DB;   /* deeper panel / hover on paper */

  /* ----------------------------------------------------------
     COLOR — Accent & Semantic
     ---------------------------------------------------------- */
  --s4-amber:      #CD713D;   /* THE accent. Sparing use. Arrow, callouts, key numbers. */
  --s4-amber-ink:  #8A4A1E;   /* amber-on-paper text */
  --s4-amber-wash: #F6E6D6;   /* amber tint for highlighted backgrounds */

  --s4-red:        #B42318;   /* emergency / critical / red-flag callouts only */
  --s4-red-wash:   #FBE8E6;
  --s4-green:      #2F7D4F;   /* success / "done" / positive framework levels */
  --s4-green-wash: #E3EFE7;

  /* ----------------------------------------------------------
     COLOR — Semantic aliases
     ---------------------------------------------------------- */
  --fg-1:   var(--s4-ink);
  --fg-2:   var(--s4-graphite);
  --fg-3:   var(--s4-ash);
  --fg-inv: var(--s4-paper);

  --bg-1:   var(--s4-paper);
  --bg-2:   var(--s4-paper-2);
  --bg-3:   var(--s4-paper-3);
  --bg-inv: var(--s4-ink);

  --border:       var(--s4-rule);
  --border-bold:  var(--s4-ink);

  --accent:       var(--s4-amber);
  --accent-ink:   var(--s4-amber-ink);
  --accent-wash:  var(--s4-amber-wash);

  --danger:       var(--s4-red);
  --success:      var(--s4-green);

  /* ----------------------------------------------------------
     TYPOGRAPHY — Families
     ---------------------------------------------------------- */
  --font-display: 'Jost', 'Futura', 'Century Gothic', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Scale (modular, 1.25 ratio, tuned)
     ---------------------------------------------------------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   88px;
  --fs-6xl:   128px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;
  --lh-loose: 1.75;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.14em;  /* for ALL-CAPS labels */

  /* ----------------------------------------------------------
     SPACING — 8px base
     ---------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  56px;
  --space-9:  72px;
  --space-10: 96px;
  --space-11: 128px;
  --space-12: 160px;

  /* Body measure cap */
  --measure: 68ch;

  /* ----------------------------------------------------------
     RADII — minimal; the brand is architectural
     ---------------------------------------------------------- */
  --radius-0: 0;
  --radius-1: 2px;    /* buttons, inputs (optional) */
  --radius-2: 4px;    /* small surfaces */
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     BORDERS
     ---------------------------------------------------------- */
  --border-hairline: 1px solid var(--s4-rule);
  --border-ink:      1px solid var(--s4-ink);
  --border-bold-2:   2px solid var(--s4-ink);

  /* ----------------------------------------------------------
     ELEVATION — minimal; only the sticky top bar uses a shadow
     ---------------------------------------------------------- */
  --shadow-0: none;
  --shadow-nav: 0 1px 0 var(--s4-rule);
  --shadow-panel: 0 0 0 1px var(--s4-rule);  /* fake elevation: ring, not blur */

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ----------------------------------------------------------
     GRID & DIAGRAM
     ---------------------------------------------------------- */
  --grid-dot-size: 24px;
  --grid-dot-color: rgba(138, 138, 133, 0.22);
  --bg-dotted: radial-gradient(circle, var(--grid-dot-color) 1px, transparent 1px);

  --diagram-stroke: 1.5px;
  --diagram-stroke-color: var(--s4-ink);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply these directly to h1/h2/p/etc. in design contexts.
   ============================================================ */

.s4-page {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Headings --- */

.s4-h1, h1.s4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

.s4-h2, h2.s4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

.s4-h3, h3.s4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

.s4-h4, h4.s4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

/* --- Eyebrow / Kicker — used above headings. ALL CAPS, tracked. --- */
.s4-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-2);
}

/* --- Body --- */
.s4-body, p.s4 {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-1);
  max-width: var(--measure);
}

.s4-body-serif {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  max-width: var(--measure);
}

/* --- Lead paragraph (first paragraph of a section) --- */
.s4-lead {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--fg-1);
  max-width: var(--measure);
}

/* --- Small / caption / metadata --- */
.s4-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-3);
  letter-spacing: 0;
}

.s4-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* --- Big numeric display (the 95% / 2x / 25% pull-outs) --- */
.s4-numeric {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-6xl);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--fg-1);
}

/* --- Monospace / diagram labels --- */
.s4-mono, code.s4 {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

/* --- Pull quote --- */
.s4-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  max-width: var(--measure);
  border-left: 2px solid var(--s4-ink);
  padding-left: var(--space-5);
}

/* --- Links --- */
.s4-link, a.s4 {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-out);
}
.s4-link:hover, a.s4:hover {
  color: var(--accent);
}

/* --- Rule --- */
.s4-rule {
  border: 0;
  border-top: 1px solid var(--s4-rule);
  margin: var(--space-7) 0;
}
.s4-rule-ink {
  border: 0;
  border-top: 1px solid var(--s4-ink);
  margin: var(--space-7) 0;
}

/* ============================================================
   UTILITY — dotted grid background
   ============================================================ */
.s4-grid-bg {
  background-color: var(--bg-1);
  background-image: var(--bg-dotted);
  background-size: var(--grid-dot-size) var(--grid-dot-size);
  background-position: 0 0;
}

/* ============================================================
   FOCUS — a consistent amber focus ring
   ============================================================ */
:where(.s4-page) :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}