:root {
  --ink: #0b1033;
  /* --ink-soft must hit WCAG AA (4.5:1) on both --bg and --bg-tint */
  --ink-soft: #5c6e75;
  --bg: #ffffff;
  --bg-tint: #f4f8fc;
  --rule: #e1e1e1;
  --rule-strong: #bbbec1;
  /* --accent-1 is the brand blue used for large/decorative elements (gradients, dots, hover states) */
  --accent-1: #6fbcfe;
  /* --accent-strong is the AA-compliant variant used for small text labels (eyebrows, meta, dates) */
  --accent-strong: #1f6dbf;
  --accent-2: #9b8aff;
  --accent-soft: #a6d7ff;
  --overlay-dark: rgba(0, 0, 0, 0.6);

  --gradient: linear-gradient(to right, #6fbcfe 0%, #998dff 51%, #6fbcfe 100%);
  --gradient-soft: linear-gradient(135deg, #6fbcfe22 0%, #9b8aff22 100%);

  --shadow-card: 0 14px 38px rgba(0, 0, 0, 0.11);
  --shadow-callout: 0 0 46px 15px rgba(0, 0, 0, 0.08);

  --font-display: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1170px;
  --pad-section: 100px;
  --pad-section-mobile: 60px;
  --pad-card: 32px;
  --radius-pill: 33px;
  --radius-card: 8px;
  --transition: 400ms ease;
}

@media (max-width: 768px) {
  :root {
    --pad-section: var(--pad-section-mobile);
  }
}