@layer tokens, base, components, motion;

@layer tokens {
  :root {
    --bg: #f4f5f7;
    --bg-2: #ffffff;
    --line: #d5d9e0;
    --line-2: #c3c8d0;
    --ghost: #e3e6eb;
    --text: #0e1116;
    --muted: #5b6270;
    --dim: #626973;
    --green: #12703f;
    --accent: #2346ff;

    --font-sans: 'Metrophobic', system-ui, -apple-system, sans-serif;
    --font-mono: 'Victor Mono', ui-monospace, monospace;
    --font-label: 'Mina', system-ui, sans-serif;

    --container: 1280px;
    --nav-height: 64px;
    --section: 104px;
    --ease: cubic-bezier(.25, .1, .25, 1);
  }
  @media (max-width: 1024px) { :root { --section: 80px; } }
  @media (max-width: 480px) { :root { --section: 56px; } }
}