/* =============================================================================
   ProSuitability marketing — TYPOGRAPHY, SPACING & LAYOUT tokens
   Source of truth: rwl_project/User Guides/web front end/
                    typography-spacing-layout-tokens.css

   Fonts are referenced by family name with robust fallback stacks. The
   webfonts (Fraunces / IBM Plex Sans / IBM Plex Mono) are NOT yet self-hosted
   — until they are, Georgia / system-ui render (still clean and professional).
   To self-host later (GDPR-safe, no Google hotlinking):
     1. add Node's npm to PATH, then in the repo root:
        npm i @fontsource/fraunces @fontsource/ibm-plex-sans @fontsource/ibm-plex-mono
     2. copy the woff2 files into web/static/marketing/fonts/ and add @font-face
        rules here (or import the @fontsource css and serve it locally).
   ============================================================================= */

:root {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-display: clamp(2.5rem, 4vw + 1.5rem, 4.5rem);

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.45;
  --leading-relaxed: 1.65;
  --leading-loose:   1.6;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;

  --space-section-y:    clamp(3rem, 6vw, 6rem);
  --space-section-y-sm: clamp(2rem, 4vw, 3.5rem);
  --space-block:        clamp(1.5rem, 3vw, 2.5rem);
  --space-stack:        1.5rem;
  --space-gutter:       clamp(1rem, 3vw, 2.5rem);

  --container-prose:   68ch;
  --container-content: 1200px;
  --container-wide:    1440px;
}

/* Base element styles (kept as element selectors; templates layer explicit
   helper/utility CLASSES on top so Tailwind's preflight reset can't strip
   sizing — class specificity wins regardless of stylesheet order). */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  font-weight: var(--fw-regular);
  color: var(--color-text-primary);
  background: var(--color-bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Helper classes — these are what templates use. */
.font-display { font-family: var(--font-display); }
.font-sans    { font-family: var(--font-sans); }
.font-mono    { font-family: var(--font-mono); }

.text-display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.h2 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--text-4xl); line-height: var(--leading-snug);  letter-spacing: var(--tracking-snug); }
.h3 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--text-3xl); line-height: var(--leading-snug); }
.h4 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--text-2xl); line-height: var(--leading-normal); }
.h5 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--text-xl);  line-height: var(--leading-normal); }
.h6 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--text-lg);  line-height: var(--leading-normal); }

.lead     { font-size: var(--text-lg); line-height: var(--leading-loose); color: var(--color-text-secondary); }
.small    { font-size: var(--text-sm); line-height: var(--leading-normal); }
.caption  { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--color-text-tertiary); }
.overline { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-tertiary); }

.nums-tabular { font-variant-numeric: tabular-nums; }

/* Layout helpers */
.container       { width: 100%; max-width: var(--container-content); margin-inline: auto; padding-inline: var(--space-gutter); }
.container-prose { max-width: var(--container-prose); }
.container-wide  { max-width: var(--container-wide); }
.section         { padding-block: var(--space-section-y); }
.section--tight  { padding-block: var(--space-section-y-sm); }