/* ============================================================
   TechJoe Development — Design Tokens
   ============================================================
   Steampunk-inflected palette: oil-rubbed brass on cream paper,
   with deep ink for type and a single muted action color.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Base palette (raw colors) ---------- */

  /* Brass / gold — the brand's hero color, from the carved wordmark */
  --brass-50:  #faf3e0;   /* lightest tint — backgrounds */
  --brass-100: #f0e2bf;
  --brass-200: #e2c88c;
  --brass-300: #d2ad5b;
  --brass-400: #b89b5f;   /* mid brass — illustration midtones */
  --brass-500: #a8842f;   /* primary brass */
  --brass-600: #8a6a1e;   /* deep brass — primary actions */
  --brass-700: #705010;   /* burnt copper — pressed states */
  --brass-800: #4a3608;
  --brass-900: #2a1d04;

  /* Cream / paper — the ground the logo sits on */
  --paper-50:  #fdfaf3;   /* page bg, warm white */
  --paper-100: #f7f1e3;   /* card bg */
  --paper-200: #ede4cf;   /* dividers, subtle fills */
  --paper-300: #d9cdb1;
  --paper-400: #b8a98a;

  /* Ink / charcoal — type, gears in shadow */
  --ink-50:  #5a544a;
  --ink-100: #3a342b;
  --ink-200: #2a251c;     /* body type */
  --ink-300: #1c1812;     /* headings */
  --ink-400: #0f0c08;     /* near black, dark mode bg */

  /* Patina — a single muted oxidized-copper green for actions/links */
  --patina-200: #8fa898;
  --patina-400: #4f6d5d;
  --patina-600: #36513f;

  /* Rust — for destructive states, sparingly */
  --rust-400: #a64b2a;
  --rust-600: #7a3017;

  /* ---------- Semantic surface tokens ---------- */

  --bg:           var(--paper-50);
  --bg-raised:    var(--paper-100);
  --bg-sunken:    var(--paper-200);
  --bg-inverse:   var(--ink-300);

  --fg:           var(--ink-200);
  --fg-strong:    var(--ink-300);
  --fg-muted:     var(--ink-50);
  --fg-subtle:    var(--paper-400);
  --fg-inverse:   var(--paper-50);

  --accent:       var(--brass-600);
  --accent-hover: var(--brass-700);
  --accent-soft:  var(--brass-100);
  --accent-fg:    var(--paper-50);

  --link:         var(--patina-600);
  --link-hover:   var(--ink-300);

  --border:       var(--paper-300);
  --border-strong:var(--paper-400);
  --border-brass: var(--brass-500);

  --danger:       var(--rust-400);
  --success:      var(--patina-400);

  /* ---------- Type families ---------- */

  --font-display:  'Cinzel', 'Trajan Pro', 'Cormorant Garamond', Georgia, serif;
  --font-serif:    'Crimson Pro', 'Iowan Old Style', Georgia, serif;
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'IBM Plex Mono', 'JetBrains Mono', Menlo, monospace;

  /* ---------- Type scale (modular, 1.250 ratio) ---------- */

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-relaxed:1.75;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;   /* eyebrows, the wordmark */
  --tracking-widest: 0.22em;

  /* ---------- Spacing (4-base) ---------- */

  --space-0:  0;
  --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 — restrained, mostly square ---------- */

  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;     /* default for buttons/inputs */
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ---------- Shadows — soft, warm, like sun on a workbench ---------- */

  --shadow-xs: 0 1px 0 rgba(74, 54, 8, 0.06);
  --shadow-sm: 0 1px 2px rgba(74, 54, 8, 0.08), 0 1px 1px rgba(74, 54, 8, 0.04);
  --shadow-md: 0 2px 4px rgba(74, 54, 8, 0.08), 0 4px 12px rgba(74, 54, 8, 0.06);
  --shadow-lg: 0 8px 24px rgba(74, 54, 8, 0.10), 0 2px 6px rgba(74, 54, 8, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(74,54,8,0.08);

  /* Brass-rim — the signature card treatment */
  --rim-brass: inset 0 0 0 1px rgba(168, 132, 47, 0.35);

  /* ---------- Motion ---------- */

  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasis: cubic-bezier(0.3, 0.0, 0.2, 1.0);
  --ease-mech:     cubic-bezier(0.55, 0.05, 0.45, 0.95); /* mechanical, gear-like */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;
}

/* ============================================================
   Semantic type styles — apply by adding the class
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ts-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}

.ts-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brass-600);
}

.ts-display {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg-strong);
}

.ts-h1 {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--fg-strong);
  letter-spacing: var(--tracking-tight);
}

.ts-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg-strong);
}

.ts-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg-strong);
}

.ts-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg-strong);
}

.ts-lead {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--fg);
  font-style: italic;
}

.ts-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
}

.ts-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

.ts-caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
}

.ts-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-200);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-xs);
  color: var(--ink-300);
}
/* ============================================================
   TechJoe Development — Ghost Theme Overrides
   ============================================================ */
:root {
  --ghost-accent-color: var(--accent);
  --color-primary-text: var(--fg);
  --color-secondary-text: var(--fg-muted);
  --color-white: var(--paper-50);
  --color-lighter-gray: var(--paper-100);
  --color-light-gray: var(--paper-200);
  --color-mid-gray: var(--paper-300);
  --color-dark-gray: var(--ink-100);
  --color-darker-gray: var(--ink-300);
  --color-black: var(--ink-400);
}

html, body {
  background: radial-gradient(circle at 18% 0%, rgba(168, 132, 47, 0.13), transparent 32rem), linear-gradient(180deg, var(--paper-50), var(--paper-100));
  color: var(--fg) !important;
  font-family: var(--font-sans) !important;
}

body, .gh-content, .gh-article-excerpt, .gh-card-excerpt, .gh-pagehead-description, .gh-subscribe-description { font-family: var(--font-sans) !important; }

h1, h2, h3, h4, h5, h6, .gh-head-logo, .gh-cover-title, .gh-pagehead-title, .gh-topic-name, .gh-card-title, .gh-article-title, .gh-subscribe-title {
  color: var(--fg-strong) !important;
  font-family: var(--font-display) !important;
  letter-spacing: var(--tracking-tight);
}

.gh-head {
  height: 112px;
  background: linear-gradient(180deg, rgba(253,250,243,0.96), rgba(247,241,227,0.96)) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm), var(--rim-brass);
}

.gh-head-logo { align-items: center; display: inline-flex; gap: var(--space-3); color: var(--accent) !important; font-weight: 700; text-transform: uppercase; }
.gh-head-logo img, .techjoe-default-logo { max-height: 72px !important; width: auto; }
.techjoe-header-text { color: var(--accent); font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; letter-spacing: var(--tracking-wider); line-height: 1; text-transform: uppercase; white-space: nowrap; }

.gh-head .nav a, .gh-head-link, .gh-topic-link, a { color: var(--link); }
.gh-head .nav a:hover, .gh-topic-link:hover, a:hover { color: var(--link-hover); opacity: 1; }

.gh-btn, .gh-primary-btn, .gh-head-btn.gh-btn, .gh-subscribe-btn {
  background: linear-gradient(180deg, var(--brass-500), var(--brass-700)) !important;
  border: 1px solid var(--brass-700);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
  color: var(--accent-fg) !important;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.gh-btn:hover, .gh-primary-btn:hover, .gh-head-btn.gh-btn:hover, .gh-subscribe-btn:hover { background: linear-gradient(180deg, var(--brass-600), var(--brass-800)) !important; opacity: 1; }

.gh-card, .gh-topic-minimal, .gh-subscribe, .gh-pagehead { border-radius: var(--radius-lg); }
.gh-card-link { border-radius: var(--radius-lg); }
.gh-topic-grid .gh-card:not(.featured), .gh-topic-minimal { background: rgba(247,241,227,0.7); border: 1px solid var(--border); box-shadow: var(--shadow-xs), var(--rim-brass); padding: var(--space-5); }
.gh-topic-grid .gh-card.featured.large .gh-card-link { border: 1px solid rgba(168,132,47,0.55); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,0.25); }
.gh-topic-grid .gh-card.featured.large .gh-card-title, .gh-topic-grid .gh-card.featured.large .gh-card-footer, .gh-cover-content .gh-article-tag, .gh-cover-title, .gh-cover-description { color: var(--paper-50) !important; text-shadow: 0 2px 10px rgba(15,12,8,0.45); }
.gh-topic-header, .gh-read-next .gh-pagehead-title:after, .gh-foot-menu { border-color: var(--border) !important; }

.gh-foot { background: radial-gradient(circle at 50% 0, rgba(168,132,47,0.22), transparent 26rem), linear-gradient(180deg, var(--ink-300), var(--ink-400)) !important; color: var(--fg-inverse); border-top: 3px solid var(--border-brass); }
.gh-foot, .gh-foot a, .gh-foot a:hover, .gh-subscribe-title { color: var(--paper-50) !important; }
.gh-copyright, .gh-subscribe-description { color: var(--paper-300) !important; }

code, .ts-code, :not(pre)>code { background: var(--paper-200) !important; border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--ink-300) !important; font-family: var(--font-mono) !important; }
pre { background: var(--ink-300) !important; border: 1px solid var(--border-brass); border-radius: var(--radius-md); color: var(--paper-50); }

@media (max-width: 767px) {
  .gh-head { height: 88px; }
  .gh-head-logo img, .techjoe-default-logo { max-height: 52px !important; }
  .techjoe-header-text { display: none; }
}