/* ============================================================
   ThrillSEO — Design Tokens
   Satellite site variant. Editorial + consultative + data-forward.
   ============================================================ */

:root {
  /* --- Brand & neutrals -------------------------------------- */
  --ink-900: #0E1F1A;
  --ink-800: #16302A;
  --ink-700: #1F4238;
  --ink-600: #345C51;
  --ink-500: #5B7D74;
  --ink-400: #889E97;
  --ink-300: #B6C4BF;
  --ink-200: #DCE3E0;
  --ink-100: #ECEFEC;
  --paper:   #F6F4EE;
  --paper-2: #EEEBE2;
  --white:   #FFFFFF;

  /* Brand greens */
  --brand-900: #0A3D33;
  --brand-700: #115E4C;
  --brand-600: #137A5E;
  --brand-500: #1B9874;
  --brand-400: #4FB996;
  --brand-300: #8FD6BD;
  --brand-200: #C5EADC;
  --brand-100: #E6F4EE;

  /* Warm accent -- clay/terracotta */
  --accent-900: #5E2714;
  --accent-700: #8A3A1E;
  --accent-600: #B04A26;
  --accent-500: #D4662E;
  --accent-300: #F3B890;
  --accent-100: #FBE9DA;

  /* Data viz */
  --data-1: #137A5E;
  --data-2: #D4662E;
  --data-3: #3D6AB2;
  --data-4: #C99A2E;
  --data-5: #8A5AB0;
  --data-6: #6E8F2F;

  /* Semantic */
  --success: #1B9874;
  --warning: #C99A2E;
  --danger:  #B94A3A;
  --info:    #3D6AB2;

  /* Surfaces */
  --bg:            var(--paper);
  --bg-elevated:   var(--white);
  --bg-sunken:     var(--paper-2);
  --bg-inverse:    var(--ink-900);

  --fg:            var(--ink-900);
  --fg-muted:      var(--ink-600);
  --fg-subtle:     var(--ink-500);
  --fg-inverse:    var(--paper);

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --rule:          #D6D1C4;

  /* --- Type --------------------------------------------------- */
  --ff-serif: "Fraunces", "Source Serif Pro", Georgia, serif;
  --ff-sans:  "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --fs-display-xl: clamp(3.25rem, 5.5vw + 1rem, 5.5rem);
  --fs-display-l:  clamp(2.5rem,  4vw + 0.75rem, 4rem);
  --fs-display-m:  clamp(2rem,    2.5vw + 1rem, 3rem);
  --fs-h1: 2.25rem;
  --fs-h2: 1.75rem;
  --fs-h3: 1.375rem;
  --fs-h4: 1.125rem;
  --fs-lg: 1.125rem;
  --fs-md: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-xxs: 0.6875rem;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-normal: 1.45;
  --lh-reading: 1.65;

  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-wide: 0.02em;
  --ls-eyebrow: 0.16em;

  /* --- Radii -------------------------------------------------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-full: 999px;

  /* --- Shadows ------------------------------------------------ */
  --shadow-1: 0 1px 0 rgba(14,31,26,0.04), 0 1px 2px rgba(14,31,26,0.06);
  --shadow-2: 0 2px 4px rgba(14,31,26,0.06), 0 8px 16px -6px rgba(14,31,26,0.08);
  --shadow-3: 0 6px 12px rgba(14,31,26,0.08), 0 24px 48px -12px rgba(14,31,26,0.12);
  --shadow-inset: inset 0 0 0 1px var(--border);
  --ring: 0 0 0 3px rgba(19,122,94,0.28);

  /* --- Spacing ----------------------------------------------- */
  --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;

  /* --- Layout ------------------------------------------------- */
  --maxw-prose: 68ch;
  --maxw-content: 1120px;
  --maxw-wide: 1320px;
  --header-h: 72px;

  /* --- Motion ------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
}

/* ============================================================
   Base / reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-serif);
  font-weight: 480;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  margin: 0;
  color: var(--ink-900);
  font-variation-settings: "SOFT" 30, "opsz" 144;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--ff-sans); font-weight: 600; letter-spacing: var(--ls-snug); }

p { margin: 0 0 1em 0; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--brand-400); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease); }
a:hover { color: var(--brand-700); text-decoration-color: var(--brand-600); }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; }

img, svg { max-width: 100%; display: block; }

button { font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

.eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-xxs);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
}

.container { max-width: var(--maxw-content); margin: 0 auto; padding: 0 var(--s-5); }
.container-wide { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--s-5); }
.container-prose { max-width: var(--maxw-prose); margin: 0 auto; padding: 0 var(--s-5); }