/* ============================================================
   Boring Ideas — Colors & Type
   ------------------------------------------------------------
   Editorial / indie-warm. Cream paper, ink, clay accent.
   Humanist sans + a touch of mono for diagrammatic marks.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---------- Color: paper & ink ---------- */
  --paper:        #F5F1E8;   /* primary background — warm cream */
  --paper-2:      #EBE6D7;   /* slightly deeper cream, for sections / cards */
  --paper-3:      #DFD9C7;   /* deeper still, sparse use */
  --ink:          #1B1A17;   /* primary text — warm near-black */
  --ink-2:        #3A3833;   /* secondary text */
  --ink-3:        #6E6A60;   /* tertiary / metadata */
  --ink-4:        #A8A395;   /* hint, disabled */
  --rule:         #1B1A17;   /* hairline rules — same as ink, used at low width */
  --rule-soft:    #C9C2AE;   /* soft divider */

  /* ---------- Color: accent (clay) ---------- */
  --clay:         #C25A2C;   /* primary accent */
  --clay-deep:    #9C4520;   /* hover / pressed */
  --clay-soft:    #E8B89C;   /* tints, backgrounds */
  --clay-wash:    #F2D9C6;   /* lightest tint */

  /* ---------- Color: semantic ---------- */
  --ok:           #4A6B3A;   /* sage, not bright green */
  --warn:         #B8862A;   /* mustard */
  --err:          #A03A2A;   /* brick */
  --info:         #3A5470;   /* slate blue, used sparingly */

  /* ---------- Color: aliases for convention ---------- */
  --bg:           var(--paper);
  --bg-2:         var(--paper-2);
  --bg-3:         var(--paper-3);
  --fg:           var(--ink);
  --fg-1:         var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --fg-4:         var(--ink-4);
  --accent:       var(--clay);
  --accent-deep:  var(--clay-deep);
  --accent-soft:  var(--clay-soft);

  /* ---------- Type: families ---------- */
  --font-sans:    'Mona Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-italic:  'Instrument Serif', 'Mona Sans', serif;  /* used for marginalia & quoted asides only */

  /* ---------- Type: scale (modular, ratio ~1.2 at body, looser up top) ---------- */
  --t-12:         12px;
  --t-13:         13px;
  --t-14:         14px;
  --t-16:         16px;
  --t-18:         18px;
  --t-21:         21px;
  --t-26:         26px;
  --t-32:         32px;
  --t-42:         42px;
  --t-56:         56px;
  --t-72:         72px;
  --t-96:         96px;

  /* ---------- Type: weights ---------- */
  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;
  --w-bold:       700;
  --w-black:      800;

  /* ---------- Type: leading & tracking ---------- */
  --lh-tight:     1.05;   /* display */
  --lh-snug:      1.2;    /* headings */
  --lh-normal:    1.45;   /* body */
  --lh-loose:     1.6;    /* long-form prose */
  --tr-tight:     -0.02em;
  --tr-snug:      -0.01em;
  --tr-normal:    0;
  --tr-wide:      0.04em;
  --tr-caps:      0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- Radii (mostly square, slight on cards) ---------- */
  --r-0:  0px;
  --r-1:  2px;
  --r-2:  4px;
  --r-3:  6px;     /* default for buttons / inputs */
  --r-4:  10px;    /* cards */
  --r-pill: 999px;

  /* ---------- Borders ---------- */
  --bw-hair: 1px;       /* the workhorse — editorial hairline */
  --bw-1:    1.5px;
  --bw-2:    2px;
  --bw-3:    3px;       /* emphasis / display rules */
  --border:  var(--bw-hair) solid var(--ink);
  --border-soft: var(--bw-hair) solid var(--rule-soft);

  /* ---------- Shadows (used SPARINGLY — editorial means flat) ---------- */
  --sh-0: none;
  --sh-1: 0 1px 0 rgba(27,26,23,0.08);                     /* whisper */
  --sh-2: 0 2px 0 var(--ink);                              /* "stamped" — a hard offset, no blur */
  --sh-3: 4px 4px 0 var(--ink);                            /* hard offset card */
  --sh-lift: 0 1px 2px rgba(27,26,23,0.06), 0 8px 24px rgba(27,26,23,0.06);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* ============================================================
   Semantic type styles — apply directly or as @extend reference
   ============================================================ */

/* page baseline */
html { font-family: var(--font-sans); color: var(--ink); background: var(--paper); }
body { font-size: var(--t-16); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

/* Display — for hero / cover headlines */
.t-display, h1.display {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: clamp(48px, 7vw, 96px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}

/* Headings */
h1, .t-h1 { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--t-42); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--ink); }
h2, .t-h2 { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--t-32); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--ink); }
h3, .t-h3 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--t-21); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--ink); }
h4, .t-h4 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--t-18); line-height: var(--lh-snug); color: var(--ink); }

/* Body */
p, .t-body { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--t-16); line-height: var(--lh-normal); color: var(--ink); text-wrap: pretty; }
.t-body-lg { font-size: var(--t-18); line-height: var(--lh-loose); }
.t-body-sm { font-size: var(--t-14); line-height: var(--lh-normal); color: var(--ink-2); }

/* Long-form prose — for essay / blog */
.t-prose {
  font-family: var(--font-sans);
  font-size: var(--t-18);
  line-height: var(--lh-loose);
  max-width: 64ch;
  color: var(--ink);
}
.t-prose em, em.t-italic {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.05em;
}

/* Eyebrow / kicker — uppercase mono, used above headings */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-12);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Caption / metadata — small, monospaced */
.t-caption, small {
  font-family: var(--font-mono);
  font-size: var(--t-12);
  line-height: var(--lh-normal);
  color: var(--ink-3);
  letter-spacing: var(--tr-wide);
}

/* Code & marks */
code, .t-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-2);
  padding: 0.1em 0.35em;
  border-radius: var(--r-1);
  border: var(--border-soft);
  color: var(--ink);
}
pre.t-code {
  display: block;
  padding: var(--s-4) var(--s-5);
  border: var(--border);
  background: var(--paper);
  font-size: var(--t-13);
  line-height: var(--lh-normal);
  overflow-x: auto;
}

/* Marginalia — small italicized aside, sits in margin */
.t-marginalia {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: var(--t-14);
  line-height: var(--lh-normal);
  color: var(--ink-3);
}

/* Links */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--clay-deep); text-decoration-color: var(--clay); }

/* Selection — clay tint */
::selection { background: var(--clay-soft); color: var(--ink); }

/* Hairline — the editorial workhorse rule */
.rule { border: 0; border-top: var(--border); margin: var(--s-6) 0; }
.rule-soft { border: 0; border-top: var(--border-soft); margin: var(--s-6) 0; }
.rule-thick { border: 0; border-top: var(--bw-3) solid var(--ink); margin: var(--s-8) 0; }