/**
 * Gutly marketing site — design tokens (colors, type scale, layout) for CSS only.
 */
:root {
  --font-legal: "Inter", system-ui, sans-serif;

  /* —— colors (semantic) —— */
  --color-background: #0c0c13;
  --color-surface: #191919;
  --color-text: #fdfcf8;
  --color-text-secondary: #9ca3af;
  --color-primary: #6c5ce7;
  --color-primary-pressed: #6c5ce7bf;
  --color-border: #3b3b3b;
  --color-error: #ef4444;

  /* —— colors (palette) —— */
  --color-deep-indigo: #0c0c13;
  --color-charcoal: #191919;
  --color-soft-white: #fdfcf8;
  --color-gray: #9ca3af;
  --color-dark-gray: #3b3b3b;
  --color-blue: #6c5ce7;
  --color-green: #6c5ce7;
  --color-warm-amber: #e9a53d;
  --color-reality-check-teal: #6afdf3;
  --color-red: #ef4444;
  --color-rose: #db3f94;
  --color-yellow: #e4e056;

  --color-deep-indigo-10: #0c0c131a;
  --color-deep-indigo-20: #0c0c1333;
  --color-deep-indigo-50: #0c0c1380;
  --color-deep-indigo-75: #0c0c13bf;

  --color-charcoal-10: #1919191a;
  --color-charcoal-20: #19191933;
  --color-charcoal-50: #19191980;
  --color-charcoal-75: #191919bf;

  --color-soft-white-10: #fdfcf81a;
  --color-soft-white-20: #fdfcf833;
  --color-soft-white-50: #fdfcf880;
  --color-soft-white-75: #fdfcf8bf;

  --color-gray-10: #9ca3af1a;
  --color-gray-20: #9ca3af33;
  --color-gray-50: #9ca3af80;
  --color-gray-75: #9ca3afbf;

  --color-dark-gray-10: #3b3b3b1a;
  --color-dark-gray-20: #3b3b3b33;
  --color-dark-gray-50: #3b3b3b80;
  --color-dark-gray-75: #3b3b3bbf;

  --color-blue-10: #6c5ce71a;
  --color-blue-20: #6c5ce733;
  --color-blue-50: #6c5ce780;
  --color-blue-75: #6c5ce7bf;

  --color-green-10: #6c5ce71a;
  --color-green-20: #6c5ce733;
  --color-green-50: #6c5ce780;
  --color-green-75: #6c5ce7bf;

  --color-warm-amber-10: #e9a53d1a;
  --color-warm-amber-20: #e9a53d33;
  --color-warm-amber-50: #e9a53d80;
  --color-warm-amber-75: #e9a53dbf;

  --color-reality-check-teal-10: #6afdf31a;
  --color-reality-check-teal-20: #6afdf333;
  --color-reality-check-teal-50: #6afdf380;
  --color-reality-check-teal-75: #6afdf3bf;

  --color-red-10: #ef44441a;
  --color-red-20: #ef444433;
  --color-red-50: #ef444480;
  --color-red-75: #ef4444bf;

  --color-rose-10: #db3f941a;
  --color-rose-20: #db3f9433;
  --color-rose-50: #db3f9480;
  --color-rose-75: #db3f94bf;

  --color-yellow-10: #e4e0561a;
  --color-yellow-20: #e4e05633;
  --color-yellow-50: #e4e05680;
  --color-yellow-75: #e4e056bf;

  /* —— typography (px / unitless weight) —— */
  --typ-display-size: 48px;
  --typ-display-weight: 800;
  --typ-display-line-height: 56px;

  --typ-heading-1-size: 35px;
  --typ-heading-1-weight: 700;

  --typ-heading-2-size: 25px;
  --typ-heading-2-weight: 600;

  --typ-body-lg-bold-size: 19px;
  --typ-body-lg-bold-weight: 700;
  --typ-body-lg-bold-line-height: 28px;

  --typ-body-lg-medium-size: 19px;
  --typ-body-lg-medium-weight: 500;
  --typ-body-lg-medium-line-height: 28px;

  --typ-body-lg-size: 19px;
  --typ-body-lg-weight: 400;
  --typ-body-lg-line-height: 28px;

  --typ-body-lg-regular-special-size: 19px;
  --typ-body-lg-regular-special-weight: 300;
  --typ-body-lg-regular-special-line-height: 28px;
  --typ-body-lg-regular-special-letter-spacing: 5.7px;

  --typ-body-bold-size: 16px;
  --typ-body-bold-weight: 700;
  --typ-body-bold-line-height: 24px;

  --typ-body-medium-size: 16px;
  --typ-body-medium-weight: 500;
  --typ-body-medium-line-height: 24px;

  --typ-body-size: 16px;
  --typ-body-weight: 400;
  --typ-body-line-height: 24px;

  --typ-caption-size: 14px;
  --typ-caption-weight: 500;
  --typ-caption-line-height: 20px;

  --typ-caption-small-size: 11px;
  --typ-caption-small-weight: 300;
  --typ-caption-small-line-height: 16px;

  --typ-title-size: 32px;
  --typ-title-weight: 700;
  --typ-title-line-height: 40px;

  --typ-subtitle-size: 19px;
  --typ-subtitle-weight: 500;
  --typ-subtitle-line-height: 28px;

  /* —— layout (page + section vertical rhythm) —— */
  --section-pad-y: 80px;
  --main-pad-y: 80px;
}

@media (min-width: 768px) {
  :root {
    --section-pad-y: 100px;
    --main-pad-y: 100px;
  }
}