/* ============================================================================
   Thruline — shared design foundation
   ----------------------------------------------------------------------------
   Loaded on EVERY layout (marketing, docs, dashboard, checkout) before the
   section stylesheet. Single source of truth for: fonts, brand color tokens,
   semantic tokens, the light/dark theme remap, base reset + typography,
   buttons, brand line-motifs, and the theme-toggle control.

   Brand spec: thruline_rebrand.md. Palette, type, and line motifs below map
   1:1 to that document.
   ========================================================================== */

/* League Spartan (display / h1 / blockquote) is loaded from Google Fonts until
   self-hosted woff2 are added to app/assets/fonts. Switzer is self-hosted. */
@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700;800;900&display=swap");

/* ===== Switzer (self-hosted, single family w/ weights) ===== */
@font-face { font-family: "Switzer"; src: url("/assets/Switzer-Light-9f4a5a25.woff2") format("woff2");        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/Switzer-LightItalic-f469bf91.woff2") format("woff2");  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/Switzer-Regular-d4177e81.woff2") format("woff2");      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/Switzer-Italic-9def47d0.woff2") format("woff2");       font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/Switzer-Medium-385cbc0e.woff2") format("woff2");       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/Switzer-MediumItalic-824a3da3.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/Switzer-Bold-243d67bf.woff2") format("woff2");         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/Switzer-BoldItalic-d07c614e.woff2") format("woff2");   font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/Switzer-Black-44ba4feb.woff2") format("woff2");        font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/Switzer-BlackItalic-722c4a1b.woff2") format("woff2");  font-weight: 900; font-style: italic; font-display: swap; }

/* ===== Tokens ===== */
:root {
  /* Brand palette — raw (thruline_rebrand.md) */
  --ink-black: #0d1b1e;
  --grey-olive: #83807b;
  --grey-olive-dark: #595753;
  --rosy-taupe: #d29380;
  --vanilla-custard: #f8eebd;
  --parchment: #f7f4f1;
  --golden-sand: #dacd65;
  --soft-linen: #eee9df;
  --reddish-brown: #884332;
  --blue-grey: #5d97ca;
  --fiery-terracotta: #D65A3B;

  /* Fonts */
  --font-display: "League Spartan", "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Semantic — light (default; matches the PDF cream look) */
  --color-bg: var(--parchment);
  --color-bg-soft: var(--soft-linen);
  --color-surface: #fffdf8;
  --color-surface-soft: var(--soft-linen);
  --color-band: var(--vanilla-custard);       /* pale highlight bands (integrations, etc.) */
  --color-footer-bg: var(--golden-sand);
  --color-footer-text: var(--ink-black);

  --color-text: var(--ink-black);
  --color-text-secondary: var(--ink-black);
  --color-text-muted: var(--grey-olive);
  --color-on-accent: var(--parchment);          /* text/icon on a colored fill */

  --color-border: var(--soft-linen);            /* 1px boundary lines */
  --color-border-strong: var(--grey-olive);

  --color-cta: var(--fiery-terracotta);         /* primary buttons (Sign Up / Subscribe) */
  --color-cta-hover: var(--reddish-brown);
  --color-accent: var(--blue-grey);             /* links, secondary accents */
  --color-accent-hover: #4a80b0;
  --color-link: var(--color-accent);            /* body-text links (dark: golden-sand) */
  --color-link-hover: var(--color-accent-hover);

  /* Brand line-motifs */
  --nav-rule: var(--vanilla-custard);           /* 3px */
  --line-emphasis-rosy: var(--rosy-taupe);      /* 8px title underlines */
  --line-emphasis-gold: var(--golden-sand);
  --line-emphasis-brown: var(--reddish-brown);
  --line-arrow: var(--grey-olive);              /* 2px divider arrows */

  /* Radii / shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadows (warm-neutral) */
  --shadow-sm: 0 1px 3px rgba(13, 27, 30, 0.06);
  --shadow-md: 0 6px 24px rgba(13, 27, 30, 0.10);
  --shadow-lg: 0 16px 48px rgba(13, 27, 30, 0.14);

  /* Layout */
  --container: 1120px;
  --container-narrow: 760px;
}

/* Semantic — dark (derived; the PDF only specifies light) */
:root[data-theme="dark"] {
  --color-bg: var(--ink-black);
  --color-bg-soft: #12242a;
  --color-surface: #16292e;
  --color-surface-soft: #1b3036;
  --color-band: #17282a;
  --color-footer-bg: #0a1416;
  --color-footer-text: var(--parchment);

  --color-text: var(--parchment);
  --color-text-secondary: #c7c4bc;
  /* Lifted from raw grey-olive (#83807b, only 3.84:1 on the dark surfaces) to a
     warmer light grey that clears AA 4.5:1 on #16292e/#12242a — fixes the docs
     section h4s, "per month"/dates, and the nav tagline. */
  --color-text-muted: #9a968f;
  /* Ink-black, not parchment: WCAG AA on the brand fills in dark mode. The fills
     (terracotta CTA, blue accent, blue pill) are light enough that cream text only
     hit ~2.1–2.9:1; ink clears 5.5–7.6:1 while leaving every fill colour untouched.
     Light mode keeps parchment. .btn-github overrides this back (dark fill). */
  --color-on-accent: var(--ink-black);

  --color-border: rgba(247, 244, 241, 0.12);
  --color-border-strong: rgba(247, 244, 241, 0.28);

  /* Dark accent = golden-sand (brand call). --color-cta drives every terracotta
     CTA fill, brow, tag and prose/docs link colour, so flipping it here recolours
     all of them at once; ink-black text (--color-on-accent) stays high-contrast on
     the gold. Hover lifts to a pale vanilla. Semantic reds are decoupled from this
     token in dashboard.css so danger/vote/delete stay red. */
  --color-cta: var(--golden-sand);
  --color-cta-hover: #F3EFCE;
  --color-accent: #7cb0dd;                      /* blue accent stays blue (non-link) */
  --color-accent-hover: #9cc4e8;
  --color-link: var(--golden-sand);             /* body-text links go gold in dark */
  --color-link-hover: #F3EFCE;

  --nav-rule: var(--golden-sand);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
}

/* ===== Reset + base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
  padding: 0px 42px;
}

img, svg { max-width: 100%; }
/* Body links use --color-link (blue in light, golden-sand in dark) at plain (0,0,1)
   specificity — so any element with its own color rule (buttons: .btn-cta, .cta-block
   a, .tier-cta → --color-on-accent ink; nav/footer links → their own colour) still
   wins. An earlier `:root[data-theme=dark] a` override was too specific and turned
   CTA button *text* gold on the gold fill. */
a { color: var(--color-link); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--color-link-hover); }

/* ===== Typography (thruline_rebrand.md) ===== */
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 2.825rem;
  line-height: 1.05;
  letter-spacing: -0.1rem;
  color: var(--color-text);
}
h2 { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.5rem, 3vw, 1.75rem); line-height: 1.2; color: var(--color-text); }
h3 { font-family: var(--font-body); font-weight: 500; font-size: 1.25rem; line-height: 1.3; color: var(--color-text); }
p  { color: var(--color-text); }
blockquote { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.4; color: var(--color-text); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
} 
.btn-cta { background: var(--color-cta); color: var(--color-on-accent); }
.btn-cta:hover { background: var(--color-cta-hover); color: var(--color-on-accent); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--color-border-strong); color: var(--color-text); }
.btn-ghost:hover { border-color: var(--color-text); color: var(--color-text); }

/* ===== Brand line-motifs ===== */
.rule-nav { border: none; border-top: 3px solid var(--nav-rule); }
.boundary { border: none; border-top: 1px solid var(--color-border); }
/* 8px title-emphasis underline; modifiers pick the brand color */
.title-line { display: inline-block; margin-right: 1rem; }
.title-line--taupe { border-bottom: solid 8px var(--rosy-taupe); padding-bottom: .8rem; }
.title-line--sand  { border-bottom: solid 8px var(--golden-sand); padding-bottom: .8rem; }
.title-line--brown { border-bottom: solid 8px var(--reddish-brown); padding-bottom: .8rem; }
/* 2px arrow divider between sections */
.divider-arrow { display: flex; align-items: center; color: var(--line-arrow); }
.divider-arrow::before { content: ""; flex: 1; height: 2px; background: currentColor; }
.divider-arrow::after { content: ""; width: 0; height: 0; border: 6px solid transparent; border-left-color: currentColor; }

/* ===== Theme toggle (sun / moon) ===== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.theme-toggle:hover { color: var(--color-cta); border-color: var(--color-cta); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }

/* Shared container helper */
.wrap { width: 100%; margin: 0 auto; }
.wrap-narrow { max-width: var(--container-narrow); }

/* ===== Responsive base =====
   Loaded by every layout, so this is the one place the page gutter and the
   display type scale down. h1 is a fixed 2.825rem/-0.1rem tracking, which
   overflows narrow viewports in League Spartan uppercase. */
@media (max-width: 900px) {
  body { padding: 0 20px; }
  h1 { font-size: 2.25rem; letter-spacing: -0.05rem; }
}
@media (max-width: 560px) {
  body { padding: 0 12px; }
  h1 { font-size: 1.875rem; letter-spacing: -0.02rem; line-height: 1.1; }
  h2 { font-size: 1.35rem; }
  blockquote { font-size: 1.05rem; }
}