*,
::after,
::before {
  box-sizing: border-box;
}

body {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

ul {
  padding: 0;
  margin: 0;
}

/* Base */

:root {
  /* Colors */
  --bg: rgb(255, 255, 255);
  --text: #171717;
  --muted: rgba(23, 23, 23, 0.7);
  --border: rgba(23, 23, 23, 0.16);

  /* Layout */
  --radius: 16px;
  --space-1: clamp(8px, 1vw, 12px);
  --space-2: clamp(12px, 1.4vw, 16px);
  --space-3: clamp(16px, 2vw, 24px);
  --space-4: clamp(24px, 3vw, 48px);
  --pad-inline: clamp(16px, 4vw, 32px);
  --pad-block: clamp(24px, 4vw, 48px);

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  --fs-xs: clamp(12px, 0.9vw, 13px);
  --fs-sm: clamp(13px, 1vw, 15px);
  --fs-base: clamp(15px, 1.1vw, 17px);
  --fs-lg: clamp(18px, 1.8vw, 22px);
  --fs-xl: clamp(22px, 2.5vw, 26px);
}

body {
  background-color: var(--bg);
  color: var(--text);

  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  cursor:
    url('../public/cursor.svg') 0 0,
    auto;
}

a,
button,
[role='button'],
input[type='submit'],
input[type='button'],
input[type='reset'],
select,
[onclick] {
  cursor:
    url('../public/cursor.svg') 0 0,
    pointer;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a:focus-visible,
button:focus-visible,
[role='button']:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}