:root {
  --color-primary:            #1D428A;
  --color-primary-ink:        #ffffff;
  --color-accent:             #F1C400;
  --color-accent-ink:         #000000;
  --color-highlight:          #e21f26;
  --color-highlight-ink:      #ffffff;
  --color-text:               #000000;
  --color-text-muted:         #646464;
  --color-surface:            #ffffff;
  --color-surface-alt:        #f2f2f2;
  --color-border:             #ababab;
  --color-border-subtle:      #d4d0ca;
  --color-danger:             #c0202a;
  --color-success:            #1e7d46;
  --color-focus:              #1D428A;
  --color-hero-bg:            #F1C400;
  --color-hero-ink:           #000000;
  --color-band-bg:            #1D428A;
  --color-band-ink:           #ffffff;
  --color-footer-from:        #0072b6;
  --color-footer-to:          #184388;
  --color-footer-ink:         #f1ede4;
  --color-preview-bg:         #111111;
  --color-preview-ink:        #ffffff;
  --color-preview-accent:     #F1C400;
  --color-placeholder-bg:     #fff8d6;
  --color-placeholder-border: #b38f00;
  --color-placeholder-ink:    #5c4a00;

  --font-family-brand:   system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-family-body:    system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  600;
  --font-weight-heavy:   800;

  --text-xs:      12px;
  --text-sm:      13px;
  --text-md:      15px;
  --text-lg:      16px;
  --text-xl:      18px;
  --text-2xl:     22px;
  --text-3xl:     25px;
  --text-hero:    clamp(28px, 4.4vw, 46px);
  --text-h1:      clamp(28px, 4vw, 42px);
  --text-h2:      clamp(24px, 3.4vw, 36px);
  --leading-tight: 1.15;
  --leading-body:  1.5;
  --leading-legal: 1.6;
  --letter-spacing-caps: 0.06em;

  --radius-card:   12px;
  --radius-input:  6px;
  --radius-button: 50px;
  --radius-badge:  50px;

  --border-width:     1px;
  --border-width-strong: 2px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;

  --shadow-card:  0 2px 10px rgba(29, 66, 138, 0.08);
  --shadow-nav:   0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-pop:   0 8px 30px rgba(0, 0, 0, 0.14);

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --gutter:      clamp(16px, 5vw, 80px);
  --section-gap: clamp(48px, 8vw, 96px);
  --card-padding: clamp(20px, 4vw, 36px);

  --maxw-page:  1280px;
  --maxw-flow:  900px;
  --maxw-legal: 960px;

  --preview-banner-height: 32px;
  --nav-height:    80px;
  --input-height:  52px;
  --icon-size:     56px;
  --step-dot-size: 28px;
  --grid-min-card: 240px;
  --grid-min-step: 200px;
  --grid-min-wide: 260px;
  --menu-min-width: 280px;
  --measure-title: 18ch;
  --measure-body:  60ch;

  --brand-logo-url:    url("../img/trony-logo-placeholder.svg");
  --brand-logo-width:  148px;
  --brand-logo-height: 40px;

  --transition-fast: 150ms ease;
}