:root {
  --bg-primary: #f5f7f8;

  --bg-primary-90: color-mix(in srgb, var(--bg-primary) 90%, transparent);
  --bg-primary-80: color-mix(in srgb, var(--bg-primary) 80%, transparent);
  --bg-primary-70: color-mix(in srgb, var(--bg-primary) 70%, transparent);
  --bg-primary-60: color-mix(in srgb, var(--bg-primary) 60%, transparent);
  --bg-primary-50: color-mix(in srgb, var(--bg-primary) 50%, transparent);
  --bg-primary-40: color-mix(in srgb, var(--bg-primary) 40%, transparent);
  --bg-primary-30: color-mix(in srgb, var(--bg-primary) 30%, transparent);
  --bg-primary-20: color-mix(in srgb, var(--bg-primary) 20%, transparent);
  --bg-primary-10: color-mix(in srgb, var(--bg-primary) 10%, transparent);
  --bg-primary-5: color-mix(in srgb, var(--bg-primary) 5%, transparent);
  
  --bg-primary-inv: #202426;

  --bg-secondary: #343B40;

  --bg-secondary-90: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
  --bg-secondary-80: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
  --bg-secondary-70: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
  --bg-secondary-60: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
  --bg-secondary-50: color-mix(in srgb, var(--bg-secondary) 50%, transparent);
  --bg-secondary-40: color-mix(in srgb, var(--bg-secondary) 40%, transparent);
  --bg-secondary-30: color-mix(in srgb, var(--bg-secondary) 30%, transparent);
  --bg-secondary-20: color-mix(in srgb, var(--bg-secondary) 20%, transparent);
  --bg-secondary-10: color-mix(in srgb, var(--bg-secondary) 10%, transparent);
  --bg-secondary-5: color-mix(in srgb, var(--bg-secondary) 5%, transparent);

  --bg-surface: #495157;

  --color-primary: #0B79B5;

  --color-primary-90: color-mix(in srgb, var(--color-primary) 90%, transparent);
  --color-primary-80: color-mix(in srgb, var(--color-primary) 80%, transparent);
  --color-primary-70: color-mix(in srgb, var(--color-primary) 70%, transparent);
  --color-primary-60: color-mix(in srgb, var(--color-primary) 60%, transparent);
  --color-primary-50: color-mix(in srgb, var(--color-primary) 50%, transparent);
  --color-primary-40: color-mix(in srgb, var(--color-primary) 40%, transparent);
  --color-primary-30: color-mix(in srgb, var(--color-primary) 30%, transparent);
  --color-primary-25: color-mix(in srgb, var(--color-primary) 25%, transparent);
  --color-primary-20: color-mix(in srgb, var(--color-primary) 20%, transparent);
  --color-primary-10: color-mix(in srgb, var(--color-primary) 10%, transparent);
  --color-primary-5: color-mix(in srgb, var(--color-primary) 5%, transparent);

  --color-secondary: #096692;

  --border-primary: #343B40;
  --border-secondary: #495157;

  --color-success: #0dde34;
  --color-success-20: color-mix(in srgb, var(--color-success) 20%, transparent);

  --grade-primary: linear-gradient(
    180deg,
    var(--color-primary-25) 0%,
    var(--color-primary) 100%
  );
  --grade-numbers: linear-gradient(180deg, #495157 0%, #343B40 100%);
  --grade-secondary: linear-gradient(180deg, #495157 0%, #343B40 100%);

  --text-primary: #F9F9FA;
  --text-primary-inv: #1d1d1d;
  --text-secondary-1: #CED5DA;
  --text-secondary-2: #E9EDF0;
  --text-secondary-3: #6C767D;
  --text-surface: #F9F9FA;

  --white: #fff;
  --black: #000;

  --font-heading: "Inter", sans-serif;
  --font-body: "DM Sans", sans-serif;

  /* Font sizes (1rem = 16px) */
  --fs-1: 4rem; /* 64px */
  --fs-2: 3rem; /* 48px */
  --fs-3: 2rem; /* 32px */
  --fs-4: 1.5rem; /* 24px */
  --fs-5: 1.25rem; /* 20px */
  --fs-6: 1rem; /* 16px */
  --fs-65: 1.125rem; /* 18px */
  --fs-7: 0.875rem; /* 14px */
  --fs-8: 0.75rem; /* 12px */
  --fs-9: 0.625rem; /* 10px */
}