/* Primitivas */
:root {
  --carbon: #0b0d12;
  --graphite: #13171f;
  --slate: #232b38;
  --mist: #f2f4f8;
  --gray: #a4adbd;
  --signal: #a8c4ff;
  --white: #ffffff;
  --error: #ffb1ad;
  --success: #a1dbbd;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --font-sans: 'Instrument Sans', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --duration: 180ms;
}
/* Semântica */
:root {
  --color-bg: var(--carbon);
  --color-surface: var(--graphite);
  --color-line: var(--slate);
  --color-text: var(--mist);
  --color-muted: var(--gray);
  --color-focus: var(--signal);
  --color-accent: var(--signal);
  --color-danger: var(--error);
  --layout-width: 1200px;
  --layout-gutter: clamp(22px, 5vw, 72px);
  --layout-section: clamp(72px, 9vw, 128px);
  --text-display: clamp(3.1rem, 5.6vw, 5.1rem);
  --text-heading: clamp(2rem, 3.7vw, 3.5rem);
  --text-body: 1rem;
}
/* Componentes */
:root {
  --button-bg: var(--mist);
  --button-fg: var(--carbon);
  --button-hover: var(--white);
  --button-radius: var(--radius-sm);
  --input-bg: var(--graphite);
  --input-border: var(--slate);
  --input-focus: var(--signal);
  --panel-bg: var(--graphite);
  --panel-border: var(--slate);
}