:root {
  --by-bg: #f4f7fa;
  --by-bg-warm: #f3f6f2;
  --by-surface: #ffffff;
  --by-surface-soft: rgba(255, 255, 255, 0.72);
  --by-surface-glass: rgba(255, 255, 255, 0.78);
  --by-ink: #2a3340;
  --by-ink-muted: #5b6775;
  --by-indigo: #3d5a80;
  --by-indigo-deep: #2f4663;
  --by-indigo-mid: #5a7699;
  --by-indigo-soft: #e8eef5;
  --by-indigo-wash: rgba(61, 90, 128, 0.08);
  --by-sage: #7a9e7e;
  --by-sage-deep: #4f7354;
  --by-sage-soft: #e8f0e9;
  --by-sage-wash: rgba(122, 158, 126, 0.1);
  --by-mist: #edf2f6;
  --by-line: #d5dee8;
  --by-line-soft: rgba(213, 222, 232, 0.65);
  --by-danger: #c45c5c;
  --by-success: #4f8f6a;
  --by-shadow: 0 18px 48px rgba(45, 74, 99, 0.1);
  --by-shadow-sm: 0 6px 20px rgba(45, 74, 99, 0.07);
  --by-shadow-lift: 0 14px 36px rgba(45, 74, 99, 0.12);
  --by-ring: 0 0 0 1px rgba(61, 90, 128, 0.08);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
  --font-size-base: 18px;
  --tap-min: 48px;
  --content-max: 1200px;
  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 28px;
  --chrome-h: 64px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --space-section: clamp(1.25rem, 3vw, 2rem);
}

@media (max-width: 768px) {
  :root {
    --font-size-base: 20px;
    --tap-min: 48px;
    --chrome-h: 64px;
    --radius: 18px;
  }
}

@media (max-width: 640px) {
  :root {
    --font-size-base: 20.5px;
    --tap-min: 48px;
    --chrome-h: 64px;
  }
}