:root {
  --ommo-cream: #E8E2D3;
  --ommo-cream-2: #D6D2C4;
  --ommo-taupe: #A39382;
  --ommo-taupe-deep: #7A6C5D;
  --ommo-ink: #0B0A08;
  --ommo-ink-soft: #1E1B16;
  --ommo-paper: #F4EFE3;
  --ommo-white: #FFFFFF;

  --ommo-font-display: 'OMMO Bricolage', 'Bricolage Grotesque', system-ui, sans-serif;
  --ommo-font-body: 'OMMO Mona', 'Mona Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ommo-font-mono: 'OMMO JetBrains Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ommo-space-xs: 8px;
  --ommo-space-s: 16px;
  --ommo-space-m: 24px;
  --ommo-space-l: 48px;
  --ommo-space-xl: 96px;
  --ommo-space-xxl: 160px;

  --ommo-container-max: 1440px;
  --ommo-container-pad: 32px;
  --ommo-container-pad-mobile: 20px;

  --ommo-radius-s: 10px;
  --ommo-radius-m: 18px;
  --ommo-radius-l: 28px;
  --ommo-radius-pill: 999px;

  --ommo-border-ink-12: color-mix(in srgb, var(--ommo-ink) 12%, transparent);
  --ommo-border-ink-18: color-mix(in srgb, var(--ommo-ink) 18%, transparent);
  --ommo-border-cream-18: color-mix(in srgb, var(--ommo-cream) 18%, transparent);

  --ommo-ease: cubic-bezier(.2,.8,.2,1);
  --ommo-transition-fast: 160ms var(--ommo-ease);
  --ommo-transition-base: 260ms var(--ommo-ease);
}

@media (max-width: 640px) {
  :root { --ommo-container-pad: var(--ommo-container-pad-mobile); }
}