@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&family=Unbounded:wght@500;600;700&display=swap');

:root {
  --color-paper: #f4f1e8;
  --color-white: #ffffff;
  --color-ink: #101114;
  --color-cobalt: #1838f2;
  --color-cobalt-dark: #1028b8;
  --color-signal-red: #d93427;
  --color-sky: #dce7ff;
  --color-gray: #686b73;
  --color-line: #101114;

  --color-background: var(--color-paper);
  --color-surface: var(--color-white);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-gray);
  --color-brand: var(--color-cobalt);
  --color-brand-hover: var(--color-cobalt-dark);
  --color-accent: var(--color-signal-red);
  --color-border: var(--color-line);

  --font-display: 'Unbounded', Arial, sans-serif;
  --font-text: 'Golos Text', Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --border: 2px solid var(--color-border);
  --button-height: 52px;
  --shadow-offset: 7px 7px 0 var(--color-ink);
  --focus-ring: 0 0 0 4px var(--color-signal-red);
  --motion: 220ms cubic-bezier(0.16, 1, 0.3, 1);
}