@import url("https://api.fontshare.com/v2/css?f[]=general-sans@500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --primary: #494fdf;
  --primary-bright: #4f55f1;
  --primary-deep: #3a40c4;
  --accent: var(--primary);

  --canvas-light: #ffffff;
  --canvas-dark: #000000;
  --surface-soft: #f4f4f4;
  --surface-card: #ffffff;
  --surface-deep: #0a0a0a;
  --surface-elevated: #16181a;
  --hairline-light: #e2e2e7;
  --hairline-dark: rgba(255, 255, 255, 0.12);
  --hairline-strong: #191c1f;

  --ink: #191c1f;
  --body: #1f2226;
  --charcoal: #3a3d40;
  --mute: #505a63;
  --ash: #5c5e60;
  --stone: #8d969e;
  --faint: #c9c9cd;
  --on-dark: #ffffff;
  --on-dark-mute: rgba(255, 255, 255, 0.72);

  --accent-teal: #00a87e;
  --accent-light-blue: #007bc2;
  --accent-blue-link: #376cd5;
  --accent-light-green: #428619;
  --accent-yellow: #b09000;
  --accent-warning: #ec7e00;
  --accent-pink: #e61e49;
  --accent-danger: #e23b4a;
  --accent-brown: #936d62;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 9999px;

  --font-display: "General Sans", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}