@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --font-heading: "Space Grotesk", "Trebuchet MS", sans-serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;

  --color-bg: #f4f7fc;
  --color-bg-deep: #e4edf8;
  --color-panel: rgba(255, 255, 255, 0.9);
  --color-panel-strong: rgba(255, 255, 255, 0.98);
  --color-border: rgba(30, 71, 132, 0.14);
  --color-border-strong: rgba(19, 59, 119, 0.28);

  --color-text: #0f213f;
  --color-text-muted: #3d5378;
  --color-text-soft: #63789e;

  --color-accent-blue: #0057b8;
  --color-accent-cyan: #009ac0;
  --color-accent-teal: #159762;
  --color-accent-green: #2ead70;
  --color-accent-orange: #d27d1d;
  --color-accent-rose: #d84a5f;

  --color-tint-blue: rgba(0, 87, 184, 0.16);
  --color-tint-cyan: rgba(0, 154, 192, 0.14);
  --color-tint-teal: rgba(21, 151, 98, 0.14);
  --color-tint-orange: rgba(210, 125, 29, 0.12);
  --color-tint-rose: rgba(216, 74, 95, 0.12);

  --color-input-bg: rgba(255, 255, 255, 0.96);
  --color-success: #1d9b5d;
  --color-error: #d84a5f;

  --shadow-panel: 0 16px 36px rgba(18, 48, 91, 0.1);
  --shadow-soft: 0 10px 24px rgba(18, 48, 91, 0.08);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 34px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --container-max: 1220px;
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
}