:root {
  --silver: #eeeff2;
  --silver-mist: #f7f7f9;
  --plate: #ffffff;
  --plate-recess: #f3f3f6;
  --ink-page: #16171c;
  --ink-soft: #5c5d66;
  --night: #08090b;
  --ink: #f3f2ee;
  --muted: #9a9aa4;
  --acid: #d8ff3e;
  --on-acid: #10110d;
  --hair: rgb(22 23 28 / 10%);
  --danger: #b42318;
  --on-danger: #ffffff;
  --violet: #8c5bff;

  --bg: var(--silver);
  --surface: var(--plate);
  --surface-2: var(--plate-recess);
  --line: var(--hair);
  --fg: var(--ink-page);
  --fg-dim: var(--ink-soft);
  --fg-mute: var(--ink-soft);
  --fg-invert: var(--ink);
  --surface-invert: var(--night);
  --action: var(--acid);
  --focus: var(--acid);

  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, monospace;

  --text-wordmark: 21px;
  --text-hero: clamp(28px, 3.2vw, 48px);
  --text-title: 16px;
  --text-body: 17px;
  --text-ui: 13px;
  --text-kicker: 11px;
  --text-meta: 12px;
  --text-legal: 10px;

  --weight-display: 800;
  --weight-title: 700;
  --weight-ui: 600;
  --weight-body: 400;

  --tracking-wordmark: -0.06em;
  --tracking-hero: -0.07em;
  --tracking-title: -0.03em;
  --tracking-ui: -0.02em;
  --tracking-kicker: 0.12em;
  --tracking-meta: 0.08em;

  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-40: 40px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;
  --space-140: 140px;

  --hit: 44px;
  --wrap: 1200px;
  --gutter: var(--space-40);

  --radius-plate: 24px;
  --radius-card: 16px;
  --radius-field: 14px;
  --radius-pill: 999px;
  --radius-chip: 999px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --duration: 600ms;

  --z-nav: 20;
  --z-preview: 30;
  --z-dialog: 40;
  --z-skip: 50;
}

:root[data-tema="escuro"] {
  --bg: var(--night);
  --surface: color-mix(in srgb, var(--ink) 5%, var(--night));
  --surface-2: color-mix(in srgb, var(--ink) 8%, var(--night));
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --fg: var(--ink);
  --fg-dim: var(--muted);
  --fg-mute: var(--muted);
}

@media (max-width: 767px) {
  :root {
    --gutter: var(--space-16);
  }
}