/* =============================================================
   Mickey Chandler — colors_and_type.css
   Single source of truth for color and type tokens.
   Import in any artifact:
     <link rel="stylesheet" href="/colors_and_type.css">
   ============================================================= */

/* ---------- Webfonts ----------
   We use Matthew Butterick's families (Equity / Heliotrope / Triplicate /
   Concourse), licensed by Mickey. Drop the woff2 files in /fonts/ and the
   @font-face declarations below pick them up. Until then, close Google Fonts
   render in their place so layout stays stable.

   Wordmark is Mrs Saint Delafield (Google Fonts) — Butterick doesn't ship a
   script, and the wordmark should read distinct from the rest of the system. */
@import url("https://fonts.googleapis.com/css2?family=Mrs+Saint+Delafield&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Public+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

/* Equity Text — body serif. Files expected: fonts/Equity-Text-A-Regular.woff2 etc. */
@font-face {
  font-family: "Equity Text A";
  src: url("/fonts/Equity-Text-A-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Equity Text A";
  src: url("/fonts/Equity-Text-A-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Equity Text A";
  src: url("/fonts/Equity-Text-A-Bold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* Heliotrope — display serif. Files expected: fonts/Heliotrope-4.woff2 etc. */
@font-face {
  font-family: "Heliotrope 4";
  src: url("/fonts/Heliotrope-4.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Heliotrope 4";
  src: url("/fonts/Heliotrope-4-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* Concourse — humanist sans. Files expected: fonts/Concourse-T3.woff2 etc. */
@font-face {
  font-family: "Concourse T3";
  src: url("/fonts/Concourse-T3.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Concourse T3";
  src: url("/fonts/Concourse-T4.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* Triplicate — monospace. Files expected: fonts/Triplicate-T4.woff2 etc. */
@font-face {
  font-family: "Triplicate T4";
  src: url("/fonts/Triplicate-T4.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Triplicate T4";
  src: url("/fonts/Triplicate-T4-Bold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Color tokens ---------- */

  /* Ink — page & surfaces (darkest first) */
  --ink-900: #0D0E11;
  --ink-800: #14161A;
  --ink-700: #1C1F24;
  --ink-600: #262A30;

  /* Paper — foreground (warm cream) */
  --paper-50:  #F4EFE6;
  --paper-100: #DCD6C8;
  --paper-200: #C8C1B2;
  --paper-400: #8A8474;
  --paper-600: #5A5648;

  /* Brass — signature accent */
  --brass-300: #E3C781;
  --brass-500: #C8A24A;
  --brass-700: #8A6D2C;

  /* Slate — technical / data accent */
  --slate-300: #A8BCC9;
  --slate-400: #7E96A6;
  --slate-600: #4E6473;

  /* Semantic (muted, technical contexts only) */
  --sage-500:  #7FA582;
  --amber-500: #D4A24C;
  --brick-500: #B85C5C;

  /* Lines & rules */
  --rule:        rgba(244, 239, 230, 0.08);
  --rule-strong: rgba(244, 239, 230, 0.16);
  --rule-faint:  rgba(244, 239, 230, 0.04);

  /* Semantic aliases */
  --bg:          var(--ink-900);
  --bg-elev:     var(--ink-800);
  --surface:     var(--ink-700);
  --border:      var(--rule);
  --fg:          var(--paper-50);
  --fg-muted:    var(--paper-200);
  --fg-quiet:    var(--paper-400);
  --fg-disabled: var(--paper-600);
  --accent:      var(--brass-500);
  --accent-dim:  var(--brass-700);
  --accent-2:    var(--slate-400);

  /* ---------- Type tokens ---------- */
  /* Wordmark — script (Google Fonts) */
  --font-wordmark: "Mrs Saint Delafield", "Imperial Script", cursive;

  /* Display — Heliotrope (Butterick). Fallback: Newsreader. */
  --font-display:  "Heliotrope 4", "Newsreader", "EB Garamond", Georgia, serif;

  /* Body — Equity Text (Butterick). Fallback: Source Serif 4. */
  --font-body:     "Equity Text A", "Source Serif 4", "Source Serif Pro", Georgia, serif;

  /* UI / labels — Concourse (Butterick). Fallback: Public Sans. */
  --font-ui:       "Concourse T3", "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Mono — Triplicate (Butterick). Fallback: JetBrains Mono. */
  --font-mono:     "Triplicate T4", "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Scale — major third (1.250) */
  --type-display-xl: 88px;  --lh-display-xl: 96px;
  --type-display-l:  64px;  --lh-display-l:  72px;
  --type-display-m:  44px;  --lh-display-m:  52px;
  --type-h1:         32px;  --lh-h1:         40px;
  --type-h2:         24px;  --lh-h2:         32px;
  --type-h3:         18px;  --lh-h3:         28px;
  --type-body:       17px;  --lh-body:       28px;  /* serif body reads at 17 */
  --type-small:      14px;  --lh-small:      22px;
  --type-caption:    12px;  --lh-caption:    18px;

  /* Tracking */
  --track-display: -0.015em;  /* Butterick display likes less tightening than Instrument */
  --track-body:     0;
  --track-label:    0.08em;   /* small-caps labels — Concourse tracks open well */

  /* ---------- Spacing — 4px base ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- Radii ---------- */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;

  /* ---------- Elevation (sparing) ---------- */
  --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(244, 239, 230, 0.06);

  /* ---------- Motion ---------- */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   200ms;
  --dur-mid:    400ms;
  --dur-slow:   700ms;

  /* ---------- Layout ---------- */
  --content-max: 1120px;
  --prose-max:    680px;
}

/* =============================================================
   Base element styles
   ============================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--brass-500); color: var(--ink-900); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--fg);
  letter-spacing: var(--track-display);
  margin: 0;
}

h1 { font-size: var(--type-display-m); line-height: var(--lh-display-m); }
h2 { font-size: var(--type-h1);        line-height: var(--lh-h1); }
h3 { font-size: var(--type-h2);        line-height: var(--lh-h2); }
h4 { font-family: var(--font-ui); font-size: var(--type-h3); line-height: var(--lh-h3); font-weight: 500; }

p  { margin: 0 0 1em 0; color: var(--fg-muted); max-width: var(--prose-max); }
p strong { color: var(--fg); font-weight: 600; }

small, .caption {
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  line-height: var(--lh-caption);
  color: var(--fg-quiet);
}

/* Editorial label — small-caps in Concourse, brass */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.brass-rule::before {
  content: "";
  display: block;
  width: 2em;
  height: 1px;
  background: var(--accent);
  margin: 0 0 var(--space-4) 0;
}

a {
  color: var(--fg);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft);
}
a:hover { color: var(--accent); background-size: 100% 1px; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-muted);
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-7) 0;
}

button {
  font-family: var(--font-ui);
  font-size: inherit;
  line-height: inherit;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}