:root {
  --opita-color-ink: #111111;
  --opita-color-paper: #F7F7F4;
  --opita-color-surface: #EFEFEB;
  --opita-color-surface-raised: #FFFFFF;
  --opita-color-graphite: #2A2A2A;
  --opita-color-muted: #72726D;
  --opita-color-line: #D9D9D3;
  --opita-color-inverse-ink: #F6F6F2;
  --opita-color-inverse-paper: #101010;
  --opita-focus-ring: rgba(17, 17, 17, 0.20);

  --opita-artboard: 256;
  --opita-grid-base: 8px;
  --opita-grid-system: 16px;

  --opita-code-stroke: 18px;
  --opita-os-stroke: 14px;
  --opita-studio-stroke: 12.5px;

  --opita-motion-quick: 120ms;
  --opita-motion-standard: 180ms;
  --opita-motion-deliberate: 240ms;
  --opita-motion-system-reveal: 320ms;
  --opita-ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --opita-ease-precise: cubic-bezier(0.16, 1.0, 0.3, 1.0);
}