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

:root {
  --font-heading: "Poppins", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Poppins", "Segoe UI", sans-serif;

  --bg-page: #f2f7ff;
  --bg-surface: #ffffff;
  --bg-elevated: #f7fbff;
  --bg-muted: #ebf2fc;

  --color-black-base: #1F1F1F;
  --color-white-base: #FFFFFF;
  --color-red-base: #7E2A2A;
  --color-red-soft: #A34A4A;
  --color-red-muted: #C47171;
  --color-blue-base: #0D49B1;
  --color-blue-soft: #2A67CC;
  --color-blue-muted: #4D84DE;

  --text-primary: var(--color-black-base);
  --text-secondary: var(--color-black-base);
  --text-tertiary: var(--color-black-base);

  --border-soft: #d4dfef;
  --border-strong: #aec3df;

  --accent-primary: #105ce4;
  --accent-primary-strong: #0c439f;
  --accent-success: #0e8a56;
  --accent-warning: #b77700;
  --accent-danger: var(--color-red-base);

  --focus-ring: #0c55e7;

  --btn-height: 42px;
  --btn-radius: 12px;
  --btn-pad-x: 16px;
  --btn-font-weight: 700;
  --btn-dark-bg: #1F1F1F;
  --btn-dark-bg-hover: #121212;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --type-xs: 12px;
  --type-sm: 14px;
  --type-md: 16px;
  --type-lg: 22px;
  --type-xl: 34px;
  --type-2xl: 44px;

  --line-tight: 1.15;
  --line-base: 1.5;

  --shadow-soft: 0 10px 28px rgba(8, 32, 76, 0.08);
  --shadow-card: 0 14px 36px rgba(8, 32, 76, 0.1);
  --shadow-strong: 0 18px 52px rgba(8, 32, 76, 0.16);

  --motion-fast: 150ms;
  --motion-base: 220ms;

  --shell-max-width: 1440px;
}