/* ─────────────────────────────────────────────────────────
   Newcastle Therapy — Tyne Green design system
   v3 build. Tokens defined in §6 of master prompt v2.
   ───────────────────────────────────────────────────────── */

:root {
  /* Brand */
  --tyne-green:    #2A8B6B;   /* primary CTA, link, accent */
  --tyne-green-d:  #236F56;   /* hover / pressed */
  --forest-ink:    #1B3A2D;   /* heading + body text on light surfaces */
  --slate-moss:    #4A6B5C;   /* secondary text, sub-headings */
  --lichen:        #6A8576;   /* tertiary text, captions, metadata */

  /* Surface */
  --paper:         #FFFFFF;   /* primary page bg */
  --mist:          #F4F8F2;   /* alternating section bg, hero */
  --hawthorn:      #E1ECDB;   /* icon wells, decorative chips */
  --sage-border:   #C8D8C0;   /* card + divider borders */

  /* Accent */
  --warm-cream:    #E9E5DD;   /* button on dark surfaces, subtle highlight */

  /* Legacy aliases — kept so any not-yet-repainted code still resolves.
     Will be deleted in cleanup pass once topic pages confirmed. */
  --mysteria:      var(--forest-ink);
  --mysteria-deep: var(--forest-ink);
  --mysteria-bleed:var(--forest-ink);
  --charcoal:      var(--forest-ink);
  --cream:         var(--warm-cream);
  --parchment:     var(--sage-border);
  --lavender:      var(--tyne-green);
  --amethyst:      var(--tyne-green);
  --paper-warm:    var(--mist);
  --misted-95:     rgba(255,255,255,0.95);
  --misted-80:     rgba(255,255,255,0.80);
  --misted-60:     rgba(255,255,255,0.60);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--forest-ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-variation-settings: 'wght' 460;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ───────── Type scale (Inter Variable, 460 / 540) ─────────
   Per spec §6.2. The 460/540 weights are the brand's typographic signature. */
.t-display       { font-size: 60px; line-height: 1.05; letter-spacing: -0.5px; font-variation-settings: 'wght' 540; color: var(--forest-ink); }
.t-section       { font-size: 38px; line-height: 1.10; letter-spacing: -0.3px; font-variation-settings: 'wght' 460; color: var(--forest-ink); }
.t-feature       { font-size: 26px; line-height: 1.18; letter-spacing: -0.2px; font-variation-settings: 'wght' 540; color: var(--forest-ink); }
.t-sub-large     { font-size: 22px; line-height: 1.40; font-variation-settings: 'wght' 460; color: var(--slate-moss); }
.t-card          { font-size: 22px; line-height: 1.20; font-variation-settings: 'wght' 540; color: var(--forest-ink); }
.t-body-heading  { font-size: 20px; line-height: 1.30; font-variation-settings: 'wght' 540; color: var(--forest-ink); }
.t-emphasis      { font-size: 18px; line-height: 1.55; font-variation-settings: 'wght' 540; color: var(--forest-ink); }
.t-body          { font-size: 17px; line-height: 1.55; font-variation-settings: 'wght' 460; color: var(--slate-moss); }
.t-ui-bold       { font-size: 15px; line-height: 1.00; font-variation-settings: 'wght' 540; letter-spacing: -0.05px; }
.t-nav           { font-size: 15px; line-height: 1.20; font-variation-settings: 'wght' 460; }
.t-caption       { font-size: 13px; line-height: 1.35; letter-spacing: 0; font-variation-settings: 'wght' 540; color: var(--lichen); }
.t-micro         { font-size: 12px; line-height: 1.50; font-variation-settings: 'wght' 540; letter-spacing: 0.7px; text-transform: uppercase; color: var(--lichen); }

@media (max-width: 720px) {
  body { font-size: 16px; }
  .t-display { font-size: 38px; letter-spacing: -0.4px; line-height: 1.05; }
  .t-section { font-size: 28px; letter-spacing: -0.2px; }
  .t-feature { font-size: 22px; }
  .t-sub-large { font-size: 18px; }
  .t-body { font-size: 16px; }
}

/* ───────── Buttons ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  font-variation-settings: 'wght' 540;
  letter-spacing: -0.05px;
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  white-space: nowrap;
}

/* Primary — Tyne Green fill. Dominant CTA. */
.btn-primary { background: var(--tyne-green); color: #FFFFFF; }
.btn-primary:hover { background: var(--tyne-green-d); color: #FFFFFF; }

/* Secondary — outline Forest Ink. Non-dominant. */
.btn-outline { background: transparent; color: var(--forest-ink); border-color: var(--forest-ink); }
.btn-outline:hover { background: var(--forest-ink); color: #FFFFFF; }

/* Cream — for use on Tyne Green / Forest Ink dark sections. */
.btn-cream { background: var(--warm-cream); color: var(--forest-ink); }
.btn-cream:hover { background: #FFFFFF; color: var(--forest-ink); }

/* Ghost — subordinate text-link button. */
.btn-ghost { background: transparent; color: var(--forest-ink); border: none; padding: 12px 8px; }
.btn-ghost:hover { color: var(--tyne-green); }

/* On dark — used on Forest Ink / Tyne Green backgrounds */
.btn-on-dark { background: transparent; color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.4); }
.btn-on-dark:hover { background: rgba(255,255,255,0.08); color: #FFFFFF; border-color: rgba(255,255,255,0.7); }

/* Legacy aliases — keep until topic pages migrated */
.btn-dark        { background: var(--tyne-green); color: #FFFFFF; }
.btn-dark:hover  { background: var(--tyne-green-d); }
.btn-ghost-dark  { background: transparent; color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.4); }
.btn-ghost-dark:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.7); }
.btn-ghost-light { background: transparent; color: var(--forest-ink); border-color: var(--sage-border); }
.btn-ghost-light:hover { background: var(--mist); border-color: var(--forest-ink); }
.btn-link        { background: transparent; color: var(--forest-ink); padding: 12px 8px; border: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--sage-border); }
.btn-link:hover  { text-decoration-color: var(--forest-ink); }

/* Focus rings — Tyne Green at 2px, accessible */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--tyne-green);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ───────── Layout ───────── */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px) { .wrap { padding: 0 20px; } }

/* Section spacing */
.section       { padding: 96px 0; }
.section-tight { padding: 72px 0; }
@media (max-width: 720px) {
  .section       { padding: 64px 0; }
  .section-tight { padding: 48px 0; }
}

/* Cards */
.card {
  background: var(--paper);
  border: 1px solid var(--sage-border);
  border-radius: 16px;
}

/* Anchor reset — Tyne Green link colour */
a { color: var(--tyne-green); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

html { scroll-behavior: smooth; }

/* Decorative diamond mark — Tyne Green */
.mark {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--tyne-green);
  transform: rotate(45deg);
  margin: 0 6px;
  vertical-align: middle;
}

/* Hawthorn icon well — used in category cards, How it works, comparison icons */
.icon-well {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--hawthorn);
  color: var(--forest-ink);
  flex: 0 0 auto;
}

/* Image placeholders */
.img-placeholder {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(27,58,45,0.04) 0 12px,
      rgba(27,58,45,0.015) 12px 24px),
    linear-gradient(180deg, var(--mist) 0%, var(--hawthorn) 100%);
  color: var(--lichen);
  border: 1px solid var(--sage-border);
  overflow: hidden;
}
.img-placeholder .caption {
  position: absolute; inset: auto 0 12px 0; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.5px;
}

/* TODO comments rendered visibly in dev — clean comment markers in copy.
   Wrap any TODO chip in <span class="todo-chip">TODO</span> to make it visible. */
.todo-chip {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase;
  background: rgba(217, 119, 87, 0.12); color: #B85A3A;
  padding: 2px 6px; border-radius: 4px;
  vertical-align: middle;
  border: 1px solid rgba(217, 119, 87, 0.25);
}