:root {
  --c-bg: #0b0c0b;
  --c-surface: #131513;
  --c-surface-raised: #161816;
  --c-surface-user: #1e211e;
  --c-surface-hover: #171a18;
  --c-line: #262a26;
  --c-line-strong: #38403a;
  --c-line-user: #2e332e;
  --c-focus-border: #444b46;
  --c-card-border: #232722;
  --c-art-a: #1e231f;
  --c-art-b: #171a17;

  --c-text: #e8ede8;
  --c-text-muted: #8b948c;
  --c-text-dim: #858e86;
  --c-text-faint: #808981;
  --c-text-ghost: #7d857e;
  --c-text-chip: #bec5bf;

  --c-accent: #7fc96b;
  --c-accent-hover: #9bdb88;
  --c-accent-soft: #a6be95;
  --c-accent-line: #3b4f2e;
  --c-banner-bg: #111510;
  --c-banner-line: #26331e;
  --c-on-accent: #0b0c0b;
  --c-saved: #c9a96b;
  --c-saved-bg: #191712;
  --c-saved-line: #37301f;
  --c-error: #e0795c;
  --c-dev-bg: #14120f;

  --f-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-body: 'Public Sans', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --t-hero: 44px;
  --t-brand: 21px;
  --t-lead: 16px;
  --t-body: 15px;
  --t-title: 15.5px;
  --t-small: 13.5px;
  --t-meta: 11.5px;
  --t-micro: 11px;
  --t-caps: 10px;

  --lh-body: 1.55;
  --lh-hero: 1.08;
  --ls-hero: -0.025em;
  --ls-caps: 0.16em;

  --s-1: 4px;
  --s-2: 6px;
  --s-3: 8px;
  --s-4: 10px;
  --s-5: 14px;
  --s-6: 16px;
  --s-7: 18px;
  --s-8: 22px;
  --s-9: 34px;
  --s-10: 44px;

  --gutter: 24px;
  --measure: 820px;
  --dev-width: 372px;
  --tap-min: 44px;

  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-pill: 999px;

  --shadow-drawer: -24px 0 60px rgba(0, 0, 0, 0.45);
  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
  --dur-fast: 0.16s;
  --dur-card: 0.4s;
  --dur-card-stagger: 0.08s;
  --dur-reduced-motion: 0.001s;

  color-scheme: dark;
  color: var(--c-text);
  background: var(--c-bg);
  font-family: var(--f-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 560px) {
  :root {
    --gutter: 16px;
  }
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--c-bg);
}

button,
input {
  font: inherit;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

a {
  color: var(--c-accent);
  text-decoration: none;
}

a:hover {
  color: var(--c-accent-hover);
  text-decoration: underline;
}

::selection {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-delay: var(--dur-reduced-motion) !important;
    animation-duration: var(--dur-reduced-motion) !important;
    transition-delay: var(--dur-reduced-motion) !important;
    transition-duration: var(--dur-reduced-motion) !important;
  }
}
