/* =========================================================================
   Upside Down Research — Colors & Type
   Industrial / 1940s-iron-meets-2030 aesthetic.
   ========================================================================= */

/* --- Webfonts ---------------------------------------------------------
   Google hosts Libre Baskerville + JetBrains Mono. Computer Modern is not
   on Google Fonts; it is loaded from the cm-web-fonts CDN below. */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts@latest/fonts.css'); /* Computer Modern */

:root {
  /* ---- PRIMARY PALETTE ---------------------------------------------- */
  --iron-grey:     #4A4A4A;  /* primary industrial neutral */
  --steel-grey:    #6E7478;  /* lighter, cool grey for dark-surface body text & large dark fills */
  --copper-orange: #D86B27;  /* primary accent / CTA */

  /* ---- SECONDARY ----------------------------------------------------- */
  --muted-gold:    #D4AF37;  /* secondary accent, seals, rules */
  --deep-blue:     #2C3E50;  /* depth / secondary text on light */

  /* ---- ACCENT / NEUTRAL --------------------------------------------- */
  --off-white:     #F5F5F5;  /* canvas */
  --rust:          #8B3A1F;  /* oxidized iron · archival / warning / destructive */

  /* ---- EXTENDED NEUTRALS (derived, for hierarchy) ------------------- */
  --ink:           #1A1A1A;  /* primary text on light */
  --iron-900:      #2A2A2A;
  --iron-700:      #3A3A3A;
  --iron-500:      #4A4A4A;  /* = iron-grey */
  --iron-300:      #8A8A8A;
  --iron-200:      #B8B8B8;
  --iron-100:      #D8D8D8;
  --iron-50:       #ECECEC;
  --paper:         #FAFAF7;  /* warm off-white for documents */
  --paper-tint:    #F0EFEA;  /* ruled-paper / card contrast */

  /* ---- SEMANTIC: SURFACES & TEXT ------------------------------------ */
  --bg:            var(--off-white);
  --bg-paper:      var(--paper);
  --bg-card:       #FFFFFF;
  --bg-dark:       var(--steel-grey);
  --bg-darker:     var(--iron-900);
  --bg-deep:       var(--deep-blue);

  --fg1:           var(--ink);          /* primary text */
  --fg2:           var(--iron-700);     /* secondary text */
  --fg3:           var(--iron-300);     /* muted / metadata */
  --fg-on-dark:    var(--off-white);
  --fg-on-dark-2:  #BFBFBF;

  --accent:        var(--copper-orange);
  --accent-hover:  #B85615;
  --accent-press:  #96450F;
  --link:          var(--deep-blue);
  --link-hover:    var(--copper-orange);

  --rule:          var(--iron-200);     /* hairline rules */
  --rule-strong:   var(--iron-700);

  --danger:        var(--rust);
  --success:       #2D5F3F;
  --warn:          var(--muted-gold);

  /* ---- TYPE FAMILIES ------------------------------------------------- */
  --font-serif:    'Computer Modern Serif', 'Latin Modern Roman', 'Libre Baskerville', 'Iowan Old Style', Georgia, serif;
  --font-sans:     'Computer Modern Sans', 'Latin Modern Sans', 'Libre Baskerville', Georgia, serif;  /* intentionally serif-first; sans only as last resort */
  --font-display:  'Libre Baskerville', 'Computer Modern Serif', Georgia, serif;  --font-cm:       'Computer Modern Serif', 'Latin Modern Roman', 'Libre Baskerville', Georgia, serif;
  --font-mono:     'Computer Modern Typewriter', 'Latin Modern Mono', 'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  /* ---- TYPE SCALE (modular, 1.25) ----------------------------------- */
  --size-xs:   11px;
  --size-sm:   13px;
  --size-base: 15px;
  --size-md:   17px;
  --size-lg:   20px;
  --size-xl:   24px;
  --size-2xl:  32px;
  --size-3xl:  40px;
  --size-4xl:  52px;
  --size-5xl:  68px;

  /* ---- LINE HEIGHTS -------------------------------------------------- */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* ---- SPACING (8pt grid, with 4pt half-steps) ---------------------- */
  --s-0:   0;
  --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;

  /* ---- RADII --------------------------------------------------------- */
  /* Deliberately restrained: this is an industrial brand, not a consumer app. */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   3px;
  --r-md:   4px;
  --r-lg:   6px;    /* maximum; never softer than this */

  /* ---- BORDERS ------------------------------------------------------- */
  --bw-hairline: 1px;
  --bw-rule:     2px;
  --bw-heavy:    3px;

  /* ---- SHADOWS (minimal; letterpress-style) ------------------------- */
  --shadow-press:  inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.25);
  --shadow-card:   0 1px 0 rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
  --shadow-card-lg:0 2px 0 rgba(0,0,0,.03), 0 4px 12px rgba(0,0,0,.08);
  --shadow-inset:  inset 0 0 0 1px var(--rule);

  /* ---- MOTION -------------------------------------------------------- */
  --ease-standard: cubic-bezier(.2,.0,.2,1);
  --ease-in-out:   cubic-bezier(.4,.0,.2,1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;

  /* ---- LAYOUT -------------------------------------------------------- */
  --measure:    68ch;      /* body column width */
  --measure-lg: 80ch;
  --container:  1200px;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Apply by wrapping content in .udr-prose or using element selectors within a
   .udr-doc scope. Kept non-invasive so the system can layer onto any page.
   ========================================================================= */

.udr-doc, .udr-prose {
  color: var(--fg1);
  font-family: var(--font-serif);
  font-size: var(--size-base);
  line-height: var(--lh-normal);
  background: var(--bg);
}

.udr-prose h1, .udr-doc h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--size-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--s-5);
}
.udr-prose h2, .udr-doc h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--size-2xl);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: var(--s-7) 0 var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: var(--bw-rule) solid var(--iron-900);
}
.udr-prose h3, .udr-doc h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--size-xl);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: var(--s-6) 0 var(--s-3);
}
.udr-prose h4, .udr-doc h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--size-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--iron-700);
  margin: var(--s-5) 0 var(--s-2);
}

.udr-prose p, .udr-doc p {
  font-family: var(--font-serif);
  font-size: var(--size-base);
  line-height: var(--lh-loose);
  margin: 0 0 var(--s-4);
  max-width: var(--measure);
}

.udr-prose a, .udr-doc a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
.udr-prose a:hover, .udr-doc a:hover { color: var(--link-hover); }

.udr-prose code, .udr-doc code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--iron-50);
  padding: 1px 5px;
  border: 1px solid var(--rule);
  border-radius: var(--r-xs);
}
.udr-prose pre, .udr-doc pre {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  line-height: var(--lh-snug);
  background: var(--ink);
  color: var(--off-white);
  padding: var(--s-4) var(--s-5);
  border-left: var(--bw-heavy) solid var(--copper-orange);
  overflow-x: auto;
}

.udr-prose blockquote, .udr-doc blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--size-lg);
  line-height: var(--lh-snug);
  color: var(--iron-700);
  border-left: var(--bw-heavy) solid var(--muted-gold);
  padding: var(--s-2) var(--s-5);
  margin: var(--s-5) 0;
}

.udr-prose hr, .udr-doc hr {
  border: 0;
  border-top: var(--bw-hairline) solid var(--rule-strong);
  margin: var(--s-6) 0;
}

.udr-prose ul, .udr-doc ul, .udr-prose ol, .udr-doc ol {
  font-family: var(--font-serif);
  line-height: var(--lh-loose);
  padding-left: var(--s-5);
  max-width: var(--measure);
}

/* =========================================================================
   UTILITY: display styles (for marketing, slides)
   ========================================================================= */
.udr-display {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--size-5xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.udr-eyebrow {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--size-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-orange);
}
.udr-caption {
  font-family: var(--font-serif);
  font-size: var(--size-sm);
  color: var(--fg3);
  letter-spacing: 0.02em;
}

/* LaTeX / whitepaper scope */
.udr-paper {
  font-family: var(--font-cm);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
}
.udr-paper h1, .udr-paper h2, .udr-paper h3, .udr-paper p,
.udr-paper ul, .udr-paper ol, .udr-paper blockquote {
  font-family: var(--font-cm);
  border-bottom: none;
}
.udr-paper h1 { font-size: 28px; text-align: center; margin-bottom: 4px; font-weight: 700; }
.udr-paper h2 { font-size: 18px; font-weight: 700; margin-top: 28px; }
.udr-paper h3 { font-size: 15px; font-weight: 700; font-style: italic; }