/* ============================================================
   MARGIN — colors_and_type.css
   ------------------------------------------------------------
   The foundational tokens. Light-mode only.
   Postmodern: serif italic display + technical sans + mono,
   used together, often in the same line.
   ============================================================ */

/* ---------- WEBFONTS ----------
   We use three Google Fonts. They are all SUBSTITUTIONS — see
   README. Real production would license:
     • Display:  PP Editorial New (Pangram Pangram) → Instrument Serif
     • Sans:     Söhne (Klim) or Neue Haas Grotesk → Space Grotesk
     • Mono:     Berkeley Mono (US Graphics) → JetBrains Mono
   ----------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Unbounded:wght@300;400;500;800&display=swap');

:root {
  /* ─────────── COLOR / INK ─────────── */
  /* Paper — pure white substrate. Clean, clinical, future-leaning. */
  --paper:        #FFFFFF;
  --paper-soft:   #F5F5F5;   /* tonal block / shaded margin */
  --chalk:        #E5E5E5;   /* hairline divider, faint rule */

  /* Ink — pure neutral graphite. No warm undertones. */
  --ink:          #0E0E0E;
  --ink-2:        #2A2A2A;   /* secondary text */
  --ink-3:        #6E6E6E;   /* tertiary / metadata */
  --ink-4:        #A6A6A6;   /* placeholder / faint */

  /* Accent — electric chartreuse. The rule-breaker.
     Use SPARINGLY. Highlight, marker, single word. */
  --acid:         #D9FF3D;
  --acid-deep:    #B8DC1F;   /* for borders/text on paper */

  /* Marine — deep electric blue. Linkish, secondary signal. */
  --marine:       #1A2BFF;
  --marine-soft:  #E6E8FF;

  /* Flag — international orange, alerts & emphasis tags. */
  --flag:         #FF3D00;
  --flag-soft:    #FFE3D9;

  /* Semantic */
  --bg:           var(--paper);
  --bg-2:         var(--paper-soft);
  --fg:           var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --fg-4:         var(--ink-4);
  --rule:         var(--chalk);
  --rule-strong:  var(--ink);
  --link:         var(--marine);
  --mark:         var(--acid);
  --alert:        var(--flag);

  /* ─────────── TYPE FAMILIES ─────────── */
  --font-heavy:   'Unbounded', ui-sans-serif, system-ui, sans-serif;  /* primary display, futurist */
  --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif;  /* connective tissue, italic */
  --font-sans:    'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ─────────── TYPE SCALE ───────────
     Editorial. Big serif italics + tight technical sans. */
  --t-mega:       clamp(72px, 11vw, 184px);   /* poster type */
  --t-display:    clamp(56px, 7.5vw, 112px);
  --t-h1:         clamp(40px, 5vw, 72px);
  --t-h2:         clamp(28px, 3.4vw, 44px);
  --t-h3:         24px;
  --t-h4:         18px;
  --t-body:       16px;
  --t-small:      14px;
  --t-micro:      12px;
  --t-nano:       11px;   /* metadata, stamp text */

  /* ─────────── LINE / TRACKING ─────────── */
  --lh-tight:     1.02;
  --lh-snug:      1.15;
  --lh-base:      1.45;
  --lh-relaxed:   1.6;

  --tr-tight:     -0.03em;
  --tr-snug:      -0.015em;
  --tr-base:      0;
  --tr-wide:      0.08em;
  --tr-mega:      0.2em;   /* labels, all-caps */

  /* ─────────── SPACING (8 + 4 mix) ─────────── */
  --s-0:   0px;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;
  --s-11:  192px;

  /* ─────────── RADII ─────────── */
  --r-0:   0px;       /* default — most things are square */
  --r-1:   2px;       /* subtle */
  --r-2:   4px;       /* inputs */
  --r-pill: 999px;    /* tags only */

  /* ─────────── BORDERS ─────────── */
  --bw-hair:   0.5px;
  --bw-1:      1px;
  --bw-2:      1.5px;
  --bw-3:      2px;

  /* ─────────── SHADOWS ───────────
     Almost none. Postmodern minimalism uses RULES, not shadows.
     We keep one subtle 'paper lift' and one 'pinned'. */
  --shadow-paper:   0 1px 0 rgba(14,14,12,0.04), 0 12px 32px -16px rgba(14,14,12,0.10);
  --shadow-pinned:  0 2px 0 var(--ink);  /* hard offset, no blur */

  /* ─────────── MOTION ─────────── */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:    cubic-bezier(0.8, 0, 0.8, 0.3);
  --ease-snap:  cubic-bezier(0.4, 1.4, 0.4, 1);  /* tiny overshoot */
  --d-instant:  80ms;
  --d-fast:     160ms;
  --d-base:     240ms;
  --d-slow:     480ms;

  /* ─────────── GRID ─────────── */
  --col:        72px;  /* preferred col on desktop */
  --gutter:     24px;
  --margin:     48px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Use these directly — h1, p, code, etc. — or compose from vars.
   ============================================================ */

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

/* Display — serif italic. The postmodern signature. */
.t-mega,
.t-display,
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}

.t-mega    { font-size: var(--t-mega); }
.t-display { font-size: var(--t-display); }
h1, .h1    { font-size: var(--t-h1); }

/* H2 mixes serif italic + technical sans depending on context.
   Default: serif italic for editorial; .h2-sans for UI. */
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}
.h2-sans {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: var(--t-h2);
  letter-spacing: var(--tr-snug);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
}

/* Body */
p, .body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  max-width: 64ch;
}

/* Mono — used inline freely, postmodern annotation style */
code, kbd, .mono, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
  font-feature-settings: "calt" 0;
}

/* Labels / overline / stamp — small, mono, caps, tracked */
.label, .overline, .stamp {
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  text-transform: uppercase;
  letter-spacing: var(--tr-mega);
  color: var(--fg-3);
  font-weight: 500;
}

/* Marker — the "highlighted" word treatment.
   A single bright bar behind text. Use ONCE per page. */
.marker {
  background: var(--mark);
  padding: 0 0.15em;
  margin: 0 -0.05em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Asterisk — postmodern footnote anchor. Always serif italic.
   Common pattern: <span class="aster">*</span> or ¹ */
.aster {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--fg);
  vertical-align: super;
  font-size: 0.7em;
}

/* Bracket annotation — [aside] style */
.bracket {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--fg-3);
}
.bracket::before { content: "["; }
.bracket::after  { content: "]"; }

/* Footnote rule — thin top border, mono caption */
.footnote {
  border-top: var(--bw-1) solid var(--rule-strong);
  padding-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--fg-3);
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: var(--bw-1) solid currentColor;
  transition: color var(--d-fast) var(--ease-out);
}
a:hover { color: var(--link); }

/* Selection */
::selection {
  background: var(--mark);
  color: var(--ink);
}

/* Horizontal rules — the workhorse of this system */
hr {
  border: 0;
  border-top: var(--bw-1) solid var(--rule-strong);
  margin: var(--s-6) 0;
}
hr.hair { border-top-color: var(--rule); }