/* ============================================================================
 * Bourdon Design System — Colors & Type
 *
 * Drop-in CSS that exposes the full token vocabulary as custom properties
 * AND applies sensible semantic defaults to bare HTML elements.
 *
 * Usage:
 *   <link rel="stylesheet" href="colors_and_type.css">
 *   ...then use var(--drone), var(--paper), etc. throughout your styles.
 *
 * Inherited from getbourdon/bourdon@main:web/style.css:
 *   - --paper (was --bg #fafaf7)
 *   - --paper-tinted (was --code-bg #f1eee5)
 *   - --ink (was --ink #1a1a1a)
 *   - --ink-muted (was --muted #555)
 *   - --drone (was --accent #1f3a52)
 *   - --rule (was --rule #d8d4c8)
 *   - max reading column 42rem
 *   - 3px solid accent left-rule for blockquotes & notes
 *   - tabular-nums on dates and metric values
 *
 * Original to this system (flagged as additions, not canon):
 *   - --paper-deep, --ink-faint
 *   - --drone-deep, --moss, --clay, --ochre
 *   - the radius scale
 *   - the shadow scale
 *   - webfonts (Instrument Serif, Geist, Geist Mono)
 * ========================================================================== */

/* Font loading — Geist + Geist Mono + Instrument Serif from Google Fonts.
   If shipping offline, copy fonts into ./fonts/ and switch to local @font-face. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

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

  /* Surfaces — warm paper, never cool gray. Updated to match the
     user-authored brand mark (May 2026): warmer cream paper, dusty rose. */
  --paper:         #f7f1e8;
  --paper-tinted:  #f0e7d8;
  --paper-deep:    #ebe6d5;
  --paper-rose:    #ead8d0;

  /* Ink — for text & marks. Subtly warmed to harmonize with rose. */
  --ink:           #1a1a1a;
  --ink-muted:     #534b48;
  --ink-faint:     #8a7d75;

  /* Structure */
  --rule:          #d8d4c8;
  --rule-strong:   #b8a89e;

  /* Drone — the primary brand accent. Matched exactly to the user-authored
     mark: dusty rose #C17C74. Headings, links, and the wordmark all
     descend from this single warm anchor. */
  --drone:         #c17c74;
  --drone-deep:    #8e5a55;
  --drone-soft:    #f0d8d3;

  /* Rose — the warm secondary family. Companion to the primary --drone
     dusty rose, descending into a soft blush tint. */
  --rose:          #c17c74;
  --rose-deep:     #8e5a55;
  --rose-soft:     #f0d8d3;

  /* Semantic state — muted, used sparingly */
  --moss:          #4f6b50;
  --moss-soft:     #e7ede1;
  --clay:          #a8543a;
  --clay-soft:     #f1e1d8;
  --ochre:         #a47b3a;
  --ochre-soft:    #efe8d4;

  /* ---------- Type tokens ---------- */

  --font-display:  'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-sans:     'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Type scale — bumped ~20% for stronger presence. 16px base, 1.20 ratio. */
  --fs-xs:    0.8125rem;  /* 13px — eyebrows, captions */
  --fs-sm:    0.9375rem;  /* 15px — secondary, table cells */
  --fs-base:  1.0625rem;  /* 17px — body */
  --fs-md:    1.25rem;    /* 20px — emphasized body, tagline */
  --fs-lg:    1.5rem;     /* 24px — h3 */
  --fs-xl:    1.9rem;     /* 30.4px — h2 */
  --fs-2xl:   2.6rem;     /* 41.6px — h1 (UI) */
  --fs-3xl:   4rem;       /* 64px — hero wordmark */
  --fs-4xl:   6.4rem;     /* 102.4px — display moments */

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-base:  1.6;       /* inherited from web/style.css */
  --lh-loose: 1.8;

  --tracking-tight: -0.02em;
  --tracking-base:  0;
  --tracking-wide:  0.02em;
  --tracking-eyebrow: 0.14em;

  /* ---------- Spacing — bumped for more generous breathing room ---------- */
  --space-1:  4px;
  --space-2:  10px;
  --space-3:  14px;
  --space-4:  20px;
  --space-6:  30px;
  --space-8:  40px;
  --space-12: 60px;
  --space-16: 80px;
  --space-24: 120px;
  --space-32: 160px;

  /* ---------- Radii ---------- */
  --radius-sm:   4px;   /* inline tags, chips, code */
  --radius-md:   8px;   /* buttons, inputs */
  --radius-lg:   12px;  /* cards, panels */
  --radius-xl:   20px;  /* hero containers, modals */
  --radius-full: 999px; /* pill capsules */

  /* ---------- Shadows — warm dusty-rose tint, higher contrast ---------- */
  --shadow-rest:    0 1px 3px rgba(193, 124, 116, 0.18);
  --shadow-raised:  0 6px 20px rgba(193, 124, 116, 0.24);
  --shadow-modal:   0 16px 48px rgba(193, 124, 116, 0.30);
  --shadow-inset:   inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- Motion ---------- */
  --ease:          cubic-bezier(0.2, 0.0, 0.0, 1);
  --dur-micro:     180ms;
  --dur-surface:   260ms;
  --dur-page:      420ms;

  /* ---------- Layout columns ---------- */
  --col-reading:   42rem;  /* 672px — long-form prose, inherited */
  --col-wide:      64rem;  /* 1024px — product UI */
  --col-app:       96rem;  /* 1536px — full app surfaces */
}

/* ============================================================================
 * Semantic element defaults
 *
 * These map raw HTML elements (p, h1..h6, code, blockquote, hr, table) to
 * the token vocabulary. Importing this file alone gives you a Bourdon-shaped
 * document with no per-element styling required.
 * ========================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-feature-settings: 'ss01', 'cv11';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Headings ----------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--drone);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4) 0;
}

h1 { font-size: var(--fs-2xl); font-weight: 700; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5, h6 { font-size: var(--fs-base); color: var(--ink-muted); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: var(--fs-xs); }

/* Display serif — opt-in via .display class on a heading */
.display, h1.display, h2.display {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: normal;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* Eyebrow type */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--space-2) 0;
}

/* Body ---------------------------------------------------------------------- */
p {
  margin: 0 0 var(--space-4) 0;
  text-wrap: pretty;
}

p.tagline {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: normal;
  font-size: var(--fs-md);
  color: var(--ink-muted);
  margin: 0;
}

p.note {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  border-left: 3px solid var(--rule);
  padding-left: var(--space-4);
  margin-top: var(--space-3);
}

strong, b { color: var(--ink); font-weight: 600; }
em { font-style: italic; }

a {
  color: var(--drone);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-thickness var(--dur-micro) var(--ease);
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--drone); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Code & mono -------------------------------------------------------------- */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-tinted);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

pre {
  background: var(--paper-tinted);
  padding: var(--space-4) var(--space-5, 20px);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  overflow-x: auto;
  border-left: 3px solid var(--drone);
}
pre > code { all: unset; }

/* Blockquote — the signature left-rule citation, inherited from web/style.css */
blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  border-left: 3px solid var(--rule);
  color: var(--ink);
  font-style: normal;
  font-size: var(--fs-base);
}
blockquote p:last-child { margin-bottom: 0; }
blockquote cite {
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  letter-spacing: var(--tracking-wide);
}
blockquote cite::before { content: '\2014\00a0'; /* em-dash + nbsp */ }

/* Rules & dividers */
hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: var(--space-8) 0;
}

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
thead th {
  text-align: left;
  border-bottom: 2px solid var(--drone);
  padding: var(--space-3) var(--space-3);
  font-weight: 600;
  color: var(--drone);
}
tbody td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
tbody tr:hover td { background: var(--paper-tinted); }

/* Lists */
ul, ol { margin: 0 0 var(--space-4) 0; padding-left: var(--space-6); }
li { margin-bottom: var(--space-2); }

/* Metric figure — pulled from web/style.css */
figure.metric {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--paper-tinted);
  border-left: 3px solid var(--drone);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--fs-sm);
}
figure.metric .label { flex: 1; color: var(--ink-muted); }
figure.metric .value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--drone);
  white-space: nowrap;
}
figure.metric .value .delta { color: var(--ink-muted); font-weight: 400; padding: 0 0.25em; }

/* Reading container */
.reading {
  max-width: var(--col-reading);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
}

/* ============================================================================
 * Utility classes — tokens reachable as classes for prototyping
 * ========================================================================== */
.bg-paper        { background: var(--paper); }
.bg-paper-tinted { background: var(--paper-tinted); }
.bg-paper-deep   { background: var(--paper-deep); }
.bg-drone        { background: var(--drone); color: var(--paper); }
.bg-drone-soft   { background: var(--drone-soft); }
.bg-moss-soft    { background: var(--moss-soft); }
.bg-clay-soft    { background: var(--clay-soft); }
.bg-ochre-soft   { background: var(--ochre-soft); }

.text-ink        { color: var(--ink); }
.text-ink-muted  { color: var(--ink-muted); }
.text-ink-faint  { color: var(--ink-faint); }
.text-drone      { color: var(--drone); }
.text-moss       { color: var(--moss); }
.text-clay       { color: var(--clay); }
.text-ochre      { color: var(--ochre); }

.font-display    { font-family: var(--font-display); font-weight: 300; }
.font-sans       { font-family: var(--font-sans); }
.font-mono       { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }