@layer reset, base, components;

:root {
  --color-canvas: rgb(231 229 228);
  --color-surface: rgb(255 255 255);
  --color-ink-dark: rgb(68 64 60);
  --color-ink-medium: rgb(87 83 78);
  --color-ink-light: rgb(120 113 108);
  --color-button: rgb(0 0 0);
  --color-button-text: rgb(255 255 255);
  --color-accent: rgb(217 119 6);
  --color-accent-dark: rgb(180 83 9);
  --color-border: rgb(28 25 23 / 10%);

  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --text-small: 0.875rem;
  --text-normal: 1rem;
  --text-large: 1.5rem;

  --radius-large: 1.5rem;
  --radius-pill: 9999px;

  --shadow-raised: 0 0 0 1px rgb(0 0 0 / 5%),
                   0 4px 6px -1px rgb(87 83 78 / 5%),
                   0 2px 4px -2px rgb(87 83 78 / 5%);
  --shadow-floating: 0 10px 15px -3px rgb(87 83 78 / 10%),
                     0 4px 6px -4px rgb(87 83 78 / 10%);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --main-width: 80rem;
}