/* ============================================================
   Foundation tokens — shared across BOTH brands
   Shape & Strength · Train With Ty
   ============================================================
   This file defines the common skeleton: type families, type
   scale, spacing, radii, motion, and shared neutrals.
   Each brand's palette.css overrides the accent/surface vars.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Neutrals (shared) ---------- */
  --ink:     #1B1F1D;  /* primary text — dark near-black with faint green */
  --stone:   #5B6165;  /* secondary text */
  --sand:    #D9D3C6;  /* hairline borders */
  --paper:   #FFFFFF;  /* pure white surface */

  /* ---------- Type families ---------- */
  --font-display: 'Fraunces', 'GT Sectra', Georgia, serif;
  --font-body:    'Inter', 'Söhne', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale (rem, 16px base) ---------- */
  --text-xs:   0.75rem;   /* 12 — eyebrow, caption */
  --text-sm:   0.875rem;  /* 14 — secondary body */
  --text-base: 1rem;      /* 16 — body */
  --text-md:   1.125rem;  /* 18 — lead */
  --text-lg:   1.375rem;  /* 22 — H4 */
  --text-xl:   1.75rem;   /* 28 — H3 */
  --text-2xl:  2.25rem;   /* 36 — H2 */
  --text-3xl:  3rem;      /* 48 — H1 mobile */
  --text-4xl:  4rem;      /* 64 — H1 desktop */
  --text-5xl:  5rem;      /* 80 — display */

  /* ---------- Spacing (8px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- Radii ---------- */
  --radius-sm:   2px;
  --radius:      4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---------- Shadows — used extremely sparingly ---------- */
  --shadow-modal: 0 24px 48px -12px rgba(27, 31, 29, 0.14);
  --shadow-pop:   0 8px 20px -6px rgba(27, 31, 29, 0.08);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* ============================================================
   Base element styles — apply via .brand-root wrapper
   ============================================================ */

.brand-root,
body.brand-root {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.brand-root h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
@media (max-width: 768px) {
  .brand-root h1, .h1 { font-size: var(--text-3xl); }
}

.brand-root h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

.brand-root h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

.brand-root h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0;
}

.brand-root p, .p {
  font-size: var(--text-base);
  line-height: 1.55;
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0;
}

.lead {
  font-size: var(--text-md);
  line-height: 1.5;
  max-width: 58ch;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.caption {
  font-size: var(--text-sm);
  color: var(--stone);
  line-height: 1.45;
}

.mono,
.brand-root code,
.brand-root pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-5xl);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
@media (max-width: 768px) {
  .display { font-size: var(--text-4xl); }
}

/* Italic emphasis — the signature type move on both brands.
   Use on a single word to lift a serif headline. */
.italic-emphasis {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

/* Links */
.brand-root a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--sand);
  transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.brand-root a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Selection + focus */
.brand-root ::selection { background: var(--accent); color: var(--paper); }
.brand-root :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Hairline rule */
.rule {
  border: 0;
  border-top: 1px solid var(--sand);
  margin: var(--space-7) 0;
}