:root {
  --teal-900: #0A3245;
  --teal-800: #0E4258;
  --teal-700: #155770;
  --teal-600: #176A87;
  --teal-500: #1B87A3;
  --teal-200: #B7E0EC;
  --teal-100: #DCEFF5;
  --teal-50: #F0F8FB;

  --sky-100: #D9EEF8;
  --sky-50: #EAF6FB;

  --orange-500: #F5A226;
  --orange-600: #E8940F;

  --grade-c: #E9463C;
  --grade-b: #BFE0EC;
  --grade-a: #3FAE4C;

  --ink-900: #0D2B36;
  --ink-700: #22475374;
  --ink-600: #3E6470;
  --ink-400: #7FA1AC;

  --white: #FFFFFF;
  --line: #C9E2EA;

  --font-display: 'Baloo 2', 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.1rem, 4vw, 3.35rem);
  --fs-h2: clamp(1.5rem, 2.4vw, 2.1rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shadow-card: 0 12px 32px rgba(10, 50, 69, 0.14);
  --shadow-card-hover: 0 20px 44px rgba(10, 50, 69, 0.22);
  --shadow-float: 0 18px 40px rgba(10, 50, 69, 0.28);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;

  --container: 1280px;
}