:root {
  --seel-ink: #202321;
  --seel-muted: #626864;
  --seel-muted-strong: #49504c;
  --seel-line: #e5e8e6;
  --seel-ground: #f5f8f7;
  --seel-selected: #f0f2f1;
  --seel-accent: #7524df;
      --seel-accent-hover: #6020bd;
  --seel-on-accent-muted: #e5d8f3;
  --seel-focus: #5920b0;
  --seel-surface: #fff;
  --seel-action-hover: #353c37;
  --seel-field-line: #cecece;
  --seel-field-hover: #969696;
  --seel-success: #18794e;
  --seel-success-ink: #12633e;
  --seel-warning: #8a4b08;
  --seel-danger: #b42318;
  --seel-info: #335f85;

  --seel-font: "Schibsted Grotesk", "Noto Sans", sans-serif;
  --font-ui: var(--seel-font);
  --font-heading: var(--seel-font);

  --seel-space-1: 4px;
  --seel-space-2: 8px;
  --seel-space-3: 12px;
  --seel-space-4: 16px;
  --seel-space-5: 20px;
  --seel-space-6: 24px;
  --seel-space-8: 32px;
  --seel-space-10: 40px;
  --seel-space-12: 48px;

  --seel-radius-control: 10px;
  --seel-radius-button: 12px;
  --seel-radius-card: 16px;
  --seel-radius-dialog: 20px;
  --seel-shadow-card: 0 2px 8px rgb(32 35 33 / 6%);
}

:root {
  color: var(--seel-ink);
  background: var(--seel-surface);
  font-family: var(--seel-font);
  font-synthesis: none;
  caret-color: var(--seel-accent);
}

html {
  scrollbar-color: var(--seel-line) var(--seel-surface);
}

body {
  color: var(--seel-ink);
  font-family: var(--seel-font);
}

body h1,
body h2,
body h3,
body h4 {
  font-family: var(--seel-font);
}

button,
input,
textarea,
select {
  font-family: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--seel-focus);
  outline-offset: 3px;
}

::selection {
  color: var(--seel-ink);
  background: #e8defa;
}