@layer reset, base, components, layout, app, marketing, utilities, animations;

:root {
  --cream: #ffffff;
  --cream-dark: #f4f7fb;
  --card: #ffffff;
  --ink: #1f242c;
  --muted: #4f5d6b;
  --line: #dde3ea;
  --line-strong: #aeb8c8;
  --primary: #126fc4;
  --primary-hover: #0b579e;
  --primary-text: #ffffff;
  --button: #126fc4;
  --button-text: #ffffff;
  --danger: #c62a38;

  --brand-field: #3793fe;
  --app-background: #ffffff;
  --sidebar-background: #f5f5f5;
  --blue: #eaf4ff;
  --blue-dark: #b9dcff;
  --progress: #c8f133;
  --peach: #fff0f1;

  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;
  --shadow: none;
  --shadow-lg: 0 6px 8px rgba(31, 36, 44, 0.14);
  --font-serif: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;

  --type-support: 0.9rem;
  --type-control: 0.95rem;
  --type-caption: 0.85rem;
  --type-callout: 1.1rem;
  --type-title: 1.25rem;
}