@import url("colors.css");

:root {
  --font-heading: "Sora", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-sans: var(--font-body);
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --leading-tight: 1.1;
  --leading-heading: 1.18;
  --leading-body: 1.55;
  --leading-ui: 1.35;
  --tracking-tight: 0;
  --tracking-normal: 0;
  --tracking-wide: 0;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --top-nav-height: 64px;
  --side-nav-width: 248px;
}

.simbo-gradient {
  background: var(--gradient-brand);
}

.simbo-card {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-card);
}

.simbo-button-primary {
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--simbo-white);
}

.simbo-button-primary:hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}

.simbo-button-secondary {
  border: 1px solid var(--color-secondary);
  background: var(--color-secondary);
  color: var(--simbo-white);
}

.simbo-button-secondary:hover {
  border-color: var(--color-secondary-hover);
  background: var(--color-secondary-hover);
}