/* ============================================================
   TMarketers Design System — Core Tokens
   ------------------------------------------------------------
   Typography + color primitives. Import this first, then layer
   a direction file (safe / stretch / wild) to set the accent.
   ============================================================ */

/* ---------- Fonts ---------- */
/* Editorial serif display + clean sans body + mono accents.
   Using Google Fonts — see README for license / substitution notes. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400..700&family=Geist+Mono:wght@400;500&family=Inter:wght@400..700&display=swap');

:root {
  /* ---------- Type families ----------
     Geist (Vercel) as the display/body face. Engineered, sharp, restrained —
     built for product surfaces, not agency flourish. Inter kept as a fallback
     for any surface that needs metric-compatible system text. */
  --font-display: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---------- Type scale (fluid, 16px base) ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  40px;
  --fs-4xl:  56px;
  --fs-5xl:  80px;
  --fs-6xl:  112px;

  /* ---------- Line heights ---------- */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* ---------- Letter spacing ---------- */
  --ls-tight:  -0.02em;
  --ls-snugger:-0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.12em; /* small-caps labels */

  /* ---------- Neutrals — "paper + ink" ---------- */
  /* Warm off-white paper, warm near-black ink. */
  --paper-50:  #FBF9F5; /* page background (warm cream) */
  --paper-100: #F5F1EA; /* subtle surface */
  --paper-200: #EAE4D8; /* hover / divider-tint */
  --paper-300: #D8CFBE; /* strong divider */
  --paper-400: #B8AE99;

  --ink-900: #1A1915; /* body / headings */
  --ink-800: #2C2A24;
  --ink-700: #4A4740; /* secondary */
  --ink-600: #6B6860; /* tertiary */
  --ink-500: #8F8B82; /* muted */
  --ink-400: #B3AFA6; /* disabled */

  /* Cool alt neutrals for the "stretch" direction */
  --slate-50:  #F7F8FA;
  --slate-100: #EEF0F4;
  --slate-200: #DCE0E7;
  --slate-300: #B9C0CC;
  --slate-700: #3A4150;
  --slate-900: #1B1F27;

  /* ---------- Semantic status ---------- */
  --success: #3F7D58;
  --warning: #B8791F;
  --danger:  #B44638;
  --info:    #3A6EA5;

  /* ---------- Accent (overridden per direction) ---------- */
  /* Default = Serpent Blue, refined cooler for UI use */
  --accent:        #1F3A6B;  /* deep cool serpent blue */
  --accent-soft:   #E4ECF7;  /* tinted surface */
  --accent-ink:    #13264A;  /* text-on-light variant */
  --accent-glow:   rgba(31, 58, 107, 0.18);
  --accent-2:      #6DA3D9;  /* secondary — cool sky / signal blue */
  --accent-2-soft: #DDE9F5;
  --accent-2-ink:  #3A6FA6;

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- Radii ---------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ---------- Borders ---------- */
  --border-hairline: 1px solid var(--paper-200);
  --border-soft:     1px solid var(--paper-300);
  --border-ink:      1px solid var(--ink-900);

  /* ---------- Shadows — warm, low, never blue ---------- */
  --shadow-xs: 0 1px 0 rgba(26, 25, 21, 0.04);
  --shadow-sm: 0 1px 2px rgba(26, 25, 21, 0.06), 0 1px 0 rgba(26, 25, 21, 0.03);
  --shadow-md: 0 4px 12px -2px rgba(26, 25, 21, 0.08), 0 2px 4px -1px rgba(26, 25, 21, 0.04);
  --shadow-lg: 0 12px 32px -6px rgba(26, 25, 21, 0.12), 0 4px 8px -2px rgba(26, 25, 21, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(26, 25, 21, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:  cubic-bezier(0.33, 1, 0.68, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ---------- Layout ---------- */
  --content-narrow: 640px;
  --content-base:   880px;
  --content-wide:   1120px;
  --content-full:   1360px;
}

/* ============================================================
   Semantic element styles — use these directly or reference
   the tokens above. Kept intentionally light.
   ============================================================ */

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--ink-900);
  background: var(--paper-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display / editorial — Fraunces, soft-weighted, tightly set */
.h-display,
h1.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}

h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snugger);
  margin: 0;
}

h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  margin: 0;
}

p {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--ink-800);
  text-wrap: pretty;
  margin: 0;
}

.lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-normal);
  color: var(--ink-700);
  letter-spacing: -0.01em;
}

small, .small { font-size: var(--fs-sm); color: var(--ink-600); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--ink-600);
}

.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

code {
  background: var(--paper-100);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  border: var(--border-hairline);
  color: var(--ink-800);
}

a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent-ink) 35%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--accent-ink); }

hr {
  border: 0;
  border-top: var(--border-hairline);
  margin: var(--sp-8) 0;
}

/* ============================================================
   Direction variants — load via body class, or attach a second
   stylesheet. Defaults to "safe".
   ============================================================ */

body.dir-safe {
  /* Sea Serpent (Sherwin-Williams SW 7615) · #3E4B54
     Deep blue-gray — ocean, not navy. Complex undertone, LRV 7.
     Secondary is a brighter sea-glass pulled from the same hue family. */

  /* Paper — cool near-white with a faint Sea Serpent undertone */
  --paper-50:    #F5F6F8;  /* page */
  --paper-100:   #EBEDF1;  /* surface */
  --paper-200:   #D9DDE3;  /* divider-tint */
  --paper-300:   #BDC3CC;  /* strong divider */
  --paper-400:   #8A929E;

  /* Ink — deeper Sea Serpent for max contrast on paper */
  --ink-900:     #1E272E;  /* near-black, cool */
  --ink-800:     #2A353E;
  --ink-700:     #3E4B54;  /* Sea Serpent itself — still readable as ink */
  --ink-600:     #5E6B75;
  --ink-500:     #7D8891;
  --ink-400:     #A4ADB6;

  --accent:      #3E4B54;  /* PRIMARY · Sea Serpent */
  --accent-soft: #E4E8ED;  /* tinted surface, same undertone */
  --accent-ink:  #1E272E;  /* text-on-light */
  --accent-glow: rgba(62, 75, 84, 0.18);

  /* SECONDARY · Sea Glass — lighter, more saturated sibling.
     Reserved for signals, data, active states, charts. */
  --accent-2:      #7FA3B5;
  --accent-2-soft: #E1EAEF;
  --accent-2-ink:  #3E6073;
}

body.dir-safe.surface-dark {
  /* Dark hero / product surface — Sea Serpent deepened toward black.
     Sea Glass becomes the signal color; text flips to paper tones. */
  background: #1E272E !important;
  color: #EBEDF1;
  --paper-50:    #1E272E;
  --paper-100:   #2A353E;
  --paper-200:   #3E4B54;  /* Sea Serpent as a surface layer */
  --paper-300:   #556371;
  --ink-900:     #EBEDF1;
  --ink-800:     #D9DDE3;
  --ink-700:     #B2BCC6;
  --ink-600:     #8A929E;
  --accent:      #7FA3B5;  /* Sea Glass is primary on dark */
  --accent-soft: rgba(127, 163, 181, 0.14);
  --accent-ink:  #E1EAEF;
  --accent-glow: rgba(127, 163, 181, 0.22);
  --accent-2:    #A7C3D1;
}

body.dir-stretch {
  /* Fog — light monochrome, zero hue. Airy and restrained. */
  --paper-50:    #FAFBFC;
  --paper-100:   #F2F4F6;
  --paper-200:   #E5E8EC;
  --paper-300:   #CED3DA;
  --ink-900:     #2A2F38;
  --ink-800:     #3E4550;
  --ink-700:     #5B6370;
  --accent:      #6E7682;
  --accent-soft: #EDEFF2;
  --accent-ink:  #2A2F38;
  --accent-glow: rgba(110, 118, 130, 0.14);
}

body.dir-wild {
  --paper-50:  #F7F2EA;
  --paper-100: #EFE6D5;
  --paper-200: #E2D4BA;
  --accent:      #2A5F4A;   /* forest */
  --accent-soft: #E0E9DE;
  --accent-ink:  #163224;
  --accent-glow: rgba(42, 95, 74, 0.18);
  /* a secondary warm accent for wild only */
  --accent-2:    #C99A3E;   /* ochre */
}