/* PALETTE */

:root {
  --c-black: rgb(0, 0, 0);
  --c-white: rgb(255, 255, 255);
  --c-red: rgb(255, 61, 64);
  --c-orange: rgb(255, 143, 44);
  --c-yellow: rgb(255, 209, 0);
  --c-green: rgb(50, 204, 88);
  --c-mint: rgb(0, 209, 187);
  --c-teal: rgb(0, 202, 216);
  --c-cyan: rgb(30, 201, 243);
  --c-blue: rgb(0, 140, 255);
  --c-indigo: rgb(103, 104, 250);
  --c-purple: rgb(211, 50, 233);
  --c-pink: rgb(255, 50, 90);
  --c-brown: rgb(177, 132, 98);
  --c-gray: rgb(142, 142, 147);
}

/* TOKENS */

:root {
  --bg: #ffffff;
  --ink: #1b1f24;
  --muted: #62686f;
  --line: #e3e6ea;
  --accent: #0b62d6;
  --head: 3.5rem;
  --font-mono: "mrly-mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mrly: "MrlyFont", monospace;
  color-scheme: light dark;
}

/* SCALES */

:root {
  --unit: 0.25rem;
  --space-1: var(--unit);
  --space-2: calc(var(--unit) * 2);
  --space-3: calc(var(--unit) * 3);
  --space-4: calc(var(--unit) * 4);
  --space-5: calc(var(--unit) * 5);
  --space-6: calc(var(--unit) * 6);
  --space-7: calc(var(--unit) * 7);
  --space-8: calc(var(--unit) * 8);
  --radius-sm: var(--unit);
  --radius-md: calc(var(--unit) * 2);
  --radius-lg: calc(var(--unit) * 3);
  --radius-full: 9999px;
  --font-size: 1rem;
  --font-sm: calc(var(--font-size) * 0.85);
  --font-lg: calc(var(--font-size) * 1.5);
  --font-xl: calc(var(--font-size) * 2.5);
  --shadow-color: 0, 0, 0;
  --shadow-1: 0 1px 2px rgba(var(--shadow-color), 0.06), 0 1px 1px rgba(var(--shadow-color), 0.04);
  --shadow-2: 0 6px 20px rgba(var(--shadow-color), 0.12), 0 1px 3px rgba(var(--shadow-color), 0.06);
  --duration: 150ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* THEME */

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg: #0d1117;
    --ink: #e6e9ec;
    --muted: #9aa1a9;
    --line: #262c36;
    --accent: #6cb2ff;
  }
}

:root.light {
  color-scheme: light;
}

:root.dark {
  --bg: #0d1117;
  --ink: #e6e9ec;
  --muted: #9aa1a9;
  --line: #262c36;
  --accent: #6cb2ff;
  color-scheme: dark;
}

/* RESET */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

svg {
  display: block;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
}