/* Trampolene design tokens (from the original design system). */
/* Trampolene color system — TWO blues + neutrals only. No other accent colors. */
:root {
  /* ---- Base palette ---- */
  --tr-blue: #467AF1;        /* Trampolene Blue — buttons, links, highlights */
  --tr-blue-deep: #18379E;   /* Deep Blue — headlines, key numbers, hover states */
  --tr-navy: #0E2160;        /* Navy — deepest band, stat/track-record sections */
  --tr-charcoal: #2B2B2B;    /* Body text */
  --tr-grey: #F7F7F5;        /* Warm light-grey section background */
  --tr-white: #FFFFFF;

  /* ---- Blue tints (derived from the two blues only, for fills/borders) ---- */
  --tr-blue-050: #EEF3FE;    /* faint blue wash — highlight surfaces */
  --tr-blue-100: #D9E4FC;    /* soft blue — chips, icon backings */
  --tr-blue-200: #B4CAF9;    /* borders on blue surfaces */

  /* ---- Neutral tints ---- */
  --tr-ink-70: rgba(43,43,43,0.70);  /* secondary text */
  --tr-ink-50: rgba(43,43,43,0.50);  /* captions, meta */
  --tr-line: #E7E7E3;                /* hairline borders on grey/white */
  --tr-line-strong: #D8D8D3;

  /* ---- Semantic aliases ---- */
  --color-primary: var(--tr-blue);
  --color-primary-hover: var(--tr-blue-deep);
  --color-emphasis: var(--tr-blue-deep);

  --text-heading: var(--tr-blue-deep);
  --text-body: var(--tr-charcoal);
  --text-muted: var(--tr-ink-70);
  --text-caption: var(--tr-ink-50);
  --text-on-blue: var(--tr-white);
  --link: var(--tr-blue);
  --link-hover: var(--tr-blue-deep);

  --surface-page: var(--tr-white);
  --surface-alt: var(--tr-grey);       /* warm-grey rhythm sections */
  --surface-card: var(--tr-white);
  --surface-blue: var(--tr-blue);
  --surface-blue-soft: var(--tr-blue-050);

  --border-card: var(--tr-line);
  --border-strong: var(--tr-line-strong);
}

/* Trampolene type system — Poppins only.
   Medium (500) for headlines h1–h3, Regular (400) for body/UI, SemiBold (600) for key numbers. */
:root {
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fw-regular: 400; /* @kind font */
  --fw-medium: 500;  /* @kind font */
  --fw-semibold: 600; /* @kind font */

  /* Type scale (desktop). Line-heights tuned for generous, readable editorial rhythm. */
  --fs-display: 64px;   /* @kind other */
  --lh-display: 1.08;   /* @kind other */
  --fs-h1: 48px;         /* @kind other */
  --lh-h1: 1.12;         /* @kind other */
  --fs-h2: 36px;         /* @kind other */
  --lh-h2: 1.18;         /* @kind other */
  --fs-h3: 26px;         /* @kind other */
  --lh-h3: 1.25;         /* @kind other */
  --fs-h4: 20px;         /* @kind other */
  --lh-h4: 1.35;         /* @kind other */
  --fs-lead: 20px;       /* @kind other */
  --lh-lead: 1.55;       /* @kind other */
  --fs-body: 17px;       /* @kind other */
  --lh-body: 1.65;       /* @kind other */
  --fs-small: 15px;      /* @kind other */
  --lh-small: 1.55;      /* @kind other */
  --fs-caption: 13px;    /* @kind other */
  --lh-caption: 1.45;    /* @kind other */
  --fs-stat: 56px;       /* @kind other */
  --lh-stat: 1.0;        /* @kind other */
  --fs-overline: 13px;   /* @kind other */
  --lh-overline: 1.3;    /* @kind other */

  --ls-tight: -0.02em;     /* @kind other */
  --ls-normal: 0;          /* @kind other */
  --ls-overline: 0.14em;   /* uppercase eyebrows @kind other */
}

/* Mobile type scale — same tokens, smaller values. Nothing above 768px is affected. */
@media (max-width: 768px) {
  :root {
    --fs-display: 38px;   /* @kind other */
    --lh-display: 1.14;   /* @kind other */
    --fs-h1: 32px;         /* @kind other */
    --lh-h1: 1.18;         /* @kind other */
    --fs-h2: 26px;         /* @kind other */
    --lh-h2: 1.22;         /* @kind other */
    --fs-h3: 21px;         /* @kind other */
    --lh-h3: 1.3;          /* @kind other */
    --fs-h4: 18px;         /* @kind other */
    --lh-h4: 1.4;          /* @kind other */
    --fs-lead: 17px;       /* @kind other */
    --lh-lead: 1.55;       /* @kind other */
    --fs-stat: 34px;       /* @kind other */
    --lh-stat: 1.0;        /* @kind other */
  }
}

/* Base document defaults */
:root {
  font-family: var(--font-sans);
  color: var(--text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Trampolene spacing — 4px base, generous whitespace. */
:root {
  --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;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 24px;      /* gutter on mobile */
  --section-y: 96px;          /* vertical rhythm between content blocks (desktop) */
  --section-y-sm: 56px;
  --gap-grid: 24px;           /* card grid gap */
}

/* Tighter vertical rhythm on mobile — same token, smaller value. */
@media (max-width: 768px) {
  :root {
    --section-y: 56px;
    --gap-grid: 16px;
  }
}

/* Trampolene effects — radii, borders, shadows. Soft-rounded, subtle depth. */
:root {
  /* Corner radii — soft-rounded photo frames + cards */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;     /* default card */
  --radius-lg: 24px;     /* photo frames, hero image */
  --radius-xl: 32px;     /* large feature frames */
  --radius-pill: 999px;  /* buttons, chips */

  /* Borders */
  --bw: 1px;
  --border-hairline: 1px solid var(--tr-line);

  /* Shadows — subtle, cool-neutral. Never harsh. */
  --shadow-xs: 0 1px 2px rgba(24, 55, 158, 0.05);
  --shadow-sm: 0 2px 8px rgba(24, 55, 158, 0.06);
  --shadow-md: 0 8px 24px rgba(24, 55, 158, 0.08);   /* card hover / floating */
  --shadow-lg: 0 20px 48px rgba(24, 55, 158, 0.12);  /* hero photo frame */

  /* Focus ring — accessibility, 3px offset for large tap targets */
  --focus-ring: 0 0 0 3px var(--tr-white), 0 0 0 6px var(--tr-blue);

  /* Motion — gentle, no bounce (calm for neurodiverse audiences) */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur: 220ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}