@import "tailwindcss";

@font-face {
  font-family: "Mona Sans";
  src: url("/fonts/mona-sans-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1E9F,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Mona Sans";
  src: url("/fonts/mona-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}

:root {
  --color-canvas: #ffffff;
  --color-surface: #ffffff;
  --color-muted-surface: #fafafa;
  --color-primary: #202021;
  --color-primary-muted: rgba(32, 32, 33, 0.6);
  --color-accent: #f26d26;
  --color-accent-strong: #da5f1e;
  --color-dark-green: #202621;
  --color-line: rgba(0, 0, 0, 0.1);
  --color-danger: #b42318;
  --radius-panel: 0.75rem;
  --radius-control: 0.375rem;
  --radius-pill: 999px;
  --container-width: 90rem;
}

@theme inline {
  --color-canvas: var(--color-canvas);
  --color-surface: var(--color-surface);
  --color-muted-surface: var(--color-muted-surface);
  --color-primary: var(--color-primary);
  --color-accent: var(--color-accent);
  --color-accent-strong: var(--color-accent-strong);
  --color-dark-green: var(--color-dark-green);
  --color-line: var(--color-line);
  --color-danger: var(--color-danger);
  --radius-panel: var(--radius-panel);
  --radius-control: var(--radius-control);
  --radius-pill: var(--radius-pill);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-primary);
  font-family: "Mona Sans", Arial, sans-serif;
}

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

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid rgba(242, 109, 38, 0.35);
  outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  outline-offset: 0;
}