/* ============================================================
 * TomHogan.io — Design Tokens
 * Palette: sky · stone · hunter green
 * Use these three. Derive nothing else without a reason.
 * ============================================================ */

:root {
  /* Core palette */
  --th-sky:           #7DD3FC;   /* light blue · thin accent only */
  --th-orange:        #C9622E;   /* warm clay · the punchy accent */
  --th-orange-soft:   #E48A56;   /* lighter orange · hover/secondary */
  --th-stone:         #F5EFDC;   /* warm off-yellow · page bg */
  --th-hunter:        #1F3D2E;   /* deep green · headlines, chrome */
  --th-navy:          #1B2A4A;   /* editorial navy · detail/secondary */
  --th-navy-soft:     #2C3F66;   /* navy hover/secondary */
  --th-oxblood:       #6B2230;   /* tier accent · Inner Loop */

  /* Supporting neutrals — all derived from the core */
  --th-stone-dark:    #E9E1C9;   /* dividers, code blocks */
  --th-stone-darker:  #D9CFB0;   /* deeper accents on stone */
  --th-ink:           #1A1A14;   /* near-black on stone, used sparingly */
  --th-ink-soft:      #3F5A4B;   /* body copy color (greenish-charcoal) */
  --th-ink-quiet:     #6F7F70;   /* metadata, captions */
  --th-sky-deep:      #0EA5E9;   /* link hover */
  --th-hunter-soft:   #2D5544;   /* secondary headings */
  --th-hunter-deep:   #122318;   /* deepest editorial green for footer */

  /* Type — serif for prose, sans for chrome, mono for metadata */
  --th-font-serif: "Source Serif Pro", "Newsreader", "EB Garamond", Georgia, serif;
  --th-font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --th-font-mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* Reading scale */
  --th-prose-size: 19px;
  --th-prose-leading: 1.65;
  --th-prose-measure: 660px;     /* max width of body copy */

  /* Spacing scale (in px, generous) */
  --th-s-1: 4px;
  --th-s-2: 8px;
  --th-s-3: 12px;
  --th-s-4: 16px;
  --th-s-5: 24px;
  --th-s-6: 32px;
  --th-s-7: 48px;
  --th-s-8: 64px;
  --th-s-9: 96px;
  --th-s-10: 144px;

  /* Radii — restrained, this is editorial */
  --th-r-sm: 3px;
  --th-r-md: 6px;
  --th-r-lg: 10px;

  /* Shadows — almost none. This is paper. */
  --th-shadow-soft: 0 1px 2px rgba(31, 61, 46, 0.06), 0 4px 12px rgba(31, 61, 46, 0.04);
  --th-shadow-card: 0 2px 6px rgba(31, 61, 46, 0.08), 0 12px 32px rgba(31, 61, 46, 0.06);

  /* Lines */
  --th-rule: 1px solid var(--th-stone-dark);
  --th-rule-soft: 1px solid rgba(31, 61, 46, 0.08);

  /* ============================================================
   * Saved palette · "Editorial Dark"
   * Locked in by Tom on May 24, 2026.
   * Use as a high-contrast surface combo — callout cards, dark
   * sections, terminal/template panels, footer accents.
   *
   *   bg          deep hunter green     #122318
   *   body        warm stone            #F5EFDC
   *   label       sky blue accent       #7DD3FC
   *   highlight   warm clay orange      #E48A56
   *
   * Use sky for cool labels (keys, metadata, eyebrows).
   * Use orange-soft for warm highlights (section headers, CTAs).
   * Keep body type in stone for warmth — never pure white.
   * ============================================================ */
  --th-surface-dark:        var(--th-hunter-deep);   /* #122318 */
  --th-on-dark:             var(--th-stone);         /* #F5EFDC body */
  --th-on-dark-cool:        var(--th-sky);           /* #7DD3FC label */
  --th-on-dark-warm:        var(--th-orange-soft);   /* #E48A56 highlight */
  --th-on-dark-quiet:       rgba(245, 239, 220, 0.55);
  --th-on-dark-rule:        rgba(245, 239, 220, 0.18);

  /* ============================================================
   * Iteration 10 · Role-based token map  (SHIPPED Jun 2026)
   * Semantic aliases over the raw palette above. Components should
   * reference ROLES (--th-surface-page, --th-tier-inner) so the
   * brand can be re-skinned by editing this block alone. The raw
   * --th-* swatches stay valid; nothing below renames them.
   * ------------------------------------------------------------ */

  /* The writer's-hand accent — the soft oxblood/rose used for the
   * period, Sign In, Subscribe, eyebrows, the Vol dot. Distinct from
   * the deep --th-oxblood (#6B2230) reserved for The Desk tier. */
  --th-oxblood-soft:        #B85968;

  /* Surfaces */
  --th-surface-page:        var(--th-stone);        /* default page ground */
  --th-surface-raised:      #FFFFFF;                /* cards, panels */
  --th-surface-footer:      #A8D8F0;                /* softened sky footer bookend */
  --th-surface-masthead:    var(--th-navy);         /* top band */
  --th-surface-inverse:     var(--th-hunter-deep);  /* dark editorial blocks */

  /* Off-site surfaces (Iteration 09) */
  --th-surface-inbox:       var(--th-navy);         /* weekly email · sky labels */
  --th-surface-annual:      #CBE7F4;                /* printed annual · soft blue */
  --th-surface-alc:         #20354F;                /* ALC co-brand navy */
  --th-surface-desk:        var(--th-oxblood);      /* The Desk · members */

  /* Ink roles */
  --th-ink-heading:         var(--th-hunter);       /* h1–h4 */
  --th-ink-body:            var(--th-ink-soft);     /* prose */
  --th-ink-meta:            var(--th-ink-quiet);    /* captions, base row */
  --th-brand-mark:          #1F3D2E;                /* logo-only deepest hunter */

  /* Accent roles */
  --th-accent-writer:       var(--th-oxblood-soft); /* period · CTAs · eyebrows */
  --th-accent-rule:         var(--th-sky);          /* structural rules · active nav */
  --th-accent-link:         var(--th-hunter);
  --th-accent-link-hover:   var(--th-orange);

  /* Membership tiers */
  --th-tier-free:           var(--th-hunter-soft);  /* The Feed · free */
  --th-tier-loop:           var(--th-navy);         /* The Loop · $19 */
  --th-tier-desk:           var(--th-oxblood);      /* The Desk · $99 (was Inner Loop) */
}

/* ---------- Saved palette utility class ---------- */
/* Drop .th-surface-dark on any container to apply the saved combo. */
.th-surface-dark {
  background: var(--th-surface-dark);
  color: var(--th-on-dark);
}
.th-surface-dark .th-label-cool { color: var(--th-on-dark-cool); }
.th-surface-dark .th-label-warm { color: var(--th-on-dark-warm); }
.th-surface-dark .th-quiet      { color: var(--th-on-dark-quiet); }
.th-surface-dark hr,
.th-surface-dark .th-rule       { border-color: var(--th-on-dark-rule); }

/* ---------- Base ---------- */
html, body {
  background: var(--th-stone);
  color: var(--th-ink-soft);
  font-family: var(--th-font-serif);
  font-size: var(--th-prose-size);
  line-height: var(--th-prose-leading);
  margin: 0;
}

h1, h2, h3, h4 {
  color: var(--th-hunter);
  font-family: var(--th-font-serif);
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0 0 var(--th-s-4);
}
h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: 32px; line-height: 1.15; }
h3 { font-size: 22px; line-height: 1.3; }

a {
  color: var(--th-hunter);
  text-decoration: underline;
  text-decoration-color: var(--th-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 150ms;
}
a:hover { color: var(--th-orange); }

p { margin: 0 0 var(--th-s-5); }

/* ---------- Utility classes ---------- */
.th-eyebrow {
  font-family: var(--th-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--th-ink-quiet);
}

.th-prose {
  max-width: var(--th-prose-measure);
  font-family: var(--th-font-serif);
  font-size: var(--th-prose-size);
  line-height: var(--th-prose-leading);
  color: var(--th-ink-soft);
}

.th-prose blockquote {
  border-left: 3px solid var(--th-sky);
  padding-left: var(--th-s-5);
  margin: var(--th-s-6) 0;
  color: var(--th-hunter-soft);
  font-style: italic;
}

.th-card {
  background: white;
  border: var(--th-rule);
  border-radius: var(--th-r-md);
  padding: var(--th-s-5);
}

.th-divider {
  border: 0;
  border-top: var(--th-rule);
  margin: var(--th-s-6) 0;
}