:root {
  --color-dark: #111111;
  --color-text: #111111;
  --color-accent: #e10600;
  --cat-crypto: #2563eb;
  --cat-trading: #059669;
  --cat-recovery: #db2777;
  --cat-schemes: #c2410c;
  --cat-explainers: #7c3aed;
  --cat-lists: #0e7490;
  --color-yellow: var(--color-accent); /* legacy alias → red */
  --color-paper: #ffffff;
  --color-projects-band: #ffffff;
  --color-muted: #666666;
  --color-line: #e8e8e8;
  --color-photo: #f3f3f3;
  --color-white: #ffffff;
  --color-hero-mid: #111111;
  --color-header: #ffffff;
  --color-nav-panel: #ffffff;
  --color-overlay: rgba(17, 17, 17, 0.96);
  --color-on-dark-soft: rgba(255, 255, 255, 0.72);
  --color-on-dark-faint: rgba(255, 255, 255, 0.56);
  --color-on-dark-line: rgba(255, 255, 255, 0.16);
  --color-on-dark-copy: rgba(255, 255, 255, 0.55);
  --color-on-dark-meta: rgba(255, 255, 255, 0.52);
  --color-eyebrow-on-paper: #666666;
  --color-photo-label: #888888;
  --color-partner: #666666;
  --color-cta-copy: #444444;
  --color-cta-eyebrow: #666666;
  --color-cta-line: #e8e8e8;
  --color-cta-input: #888888;
  --color-hero-wash-start: transparent;
  --color-hero-wash-end: transparent;
  --color-table-line: #e8e8e8;
  --color-table-head: #fafafa;
  --color-table-stripe: #fcfcfc;

  --dark: var(--color-dark);
  --yellow: var(--color-accent);
  --accent: var(--color-accent);
  --paper: var(--color-paper);
  --muted: var(--color-muted);
  --line: var(--color-line);

  --font-body: "Google Sans", Arial, sans-serif;
  --font-heading: Montserrat, Arial, sans-serif;

  --text-eyebrow: 11px;
  --text-nav: 13px;
  --text-nav-mobile: 12px;
  --text-logo: 18px;
  --text-button: 13px;
  --text-label: 12px;
  --text-body: 16px;
  --text-intro: 18px;
  --text-footer: 14px;
  --text-footer-bottom: 12px;
  --text-h1: clamp(32px, 4.5vw, 44px);
  --text-h2: clamp(24px, 3.2vw, 32px);
  --text-h3: clamp(18px, 2.4vw, 22px);
  --text-hero: var(--text-h1);
  --text-hero-mobile: var(--text-h1);
  --text-blog-hero: var(--text-h1);
  --text-article: var(--text-h1);
  --text-h2-card: var(--text-h2);
  --text-card: var(--text-h3);
  --text-solution: var(--text-h2);
  --text-stat: clamp(24px, 3.5vw, 40px);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 800;

  --lh-h1: 1.15;
  --lh-h2: 1.2;
  --lh-h3: 1.25;
  --lh-hero: var(--lh-h1);
  --lh-blog-hero: var(--lh-h1);
  --lh-article: var(--lh-h1);
  --lh-card-h2: var(--lh-h2);
  --lh-solution: var(--lh-h2);
  --lh-body: 1.75;
  --lh-intro: 1.7;
  --lh-article-copy: 1.7;
  --lh-check: 1.5;

  --track-heading: -0.03em;
  --track-stat: -0.03em;
  --track-nav: 0.04em;
  --track-logo: 0.02em;
  --track-eyebrow: 0.16em;
  --track-photo: 0.16em;
  --track-meta: 0.12em;
  --track-label: 0.1em;

  --shell: min(960px, 100% - 48px);
  --measure: 42rem;
  --space-shell-mobile: 24px;
  --header-h: 72px;
  --header-pad-y: 24px;
  --header-pad-y-mobile: 18px;
  --tab-nav-h: 0px;
  --logo-h: 24px;
  --partner-logo-h: var(--btn-min-h);
  --reveal-distance: 24px;
  --reveal-duration: 0.35s;
  --slide-duration: 1.2s;
  --menu-btn: 32px;
  --menu-bar: 16px;
  --section-y: 120px;
  --section-y-mobile: 80px;
  --hero-pad-top: 96px;
  --hero-pad-bottom: 72px;
  --hero-full-min: auto;
  --hero-half-min: auto;
  --blog-hero-pad-top: 96px;
  --blog-hero-pad-bottom: 72px;
  --article-heading-top: 80px;
  --article-heading-bottom: 48px;
  --article-content-y: 48px;
  --project-info-y: 64px;
  --cta-y: 80px;
  --footer-pad-bottom: 48px;
  --footer-grid-y: 64px;
  --grid-gap: 32px;
  --stack-gap: 24px;
  --stack-gap-lg: 48px;
  --space-card-title-top: 0.5em;
  --space-eyebrow-bottom: 1.5em;
  --space-list-indent: 1.5rem;
  --space-list-item: 0.65rem;
  --space-table-cell-y: 0.75rem;
  --space-table-cell-x: 1rem;
  --btn-pad-y: 12px;
  --btn-pad-x: 1.15rem;
  --btn-gap: 12px;
  --btn-min-h: 48px;
  --radius: 10px;
  --btn-radius: var(--radius);
  --photo-min: 0;
  --photo-wide: 0;
  --photo-mobile: 0;
  --photo-article: 0;
  --stat-min: 130px;
  --stat-min-mobile: 112px;
  --blog-card-gap: 56px;
}

@media (max-width: 900px) {
  :root {
    --header-h: calc(var(--btn-min-h) + var(--header-pad-y-mobile) * 2);
    --logo-h: 22px;
    --menu-btn: var(--btn-min-h);
    --tab-nav-h: 0px;
    --blog-card-gap: 40px;
  }
}

@media (max-width: 700px) {
  :root {
    --header-h: calc(var(--btn-min-h) + var(--header-pad-y-mobile) * 2);
  }
}