:root {
  --color-primary: #0573df;
  --color-primary-hover: #0462c0;
  --color-primary-light: #e5f2ff;
  --color-brand: #2285c7;
  --color-navy: #003365;
  --color-heading: #1b1b1b;
  --color-subtext: #484848;
  --color-muted: #626262;
  --color-placeholder: #848484;
  --color-hint: #717171;
  --color-locked-text: #777777;
  --color-input-border: #e8e8e8;
  --color-card-outline: #d5d5d5;
  --color-header-border: #cacaca;
  --color-divider: #d9d9d9;
  --color-btn-text: #fafcff;
  --color-white: #ffffff;
  --color-error: #dc2626;
  --color-page-bg: #ffffff;
  --color-locked-bg: #f5f5f5;
  --color-locked-btn: #dedede;
  --color-locked-outline: #d2d2d2;
  --color-tag-border: #d7d7d7;

  --font-urbanist: "Urbanist", system-ui, sans-serif;
  --font-outfit: "Outfit", system-ui, sans-serif;

  --radius-input: 12px;
  --radius-form-card: 32px;
  --radius-hero-card: 32px;
  --radius-logo: 14px;
  --radius-card: 32px;
  --radius-tag: 4px;

  --shadow-form-card: 0 0 24px rgba(0, 0, 0, 0.12);
  --shadow-level-img: 0 6px 4px rgba(188, 188, 188, 0.25);

  --header-height: 88px;
  --sidebar-width: 100px;
  --page-padding-x: clamp(1.5rem, 8.33vw, 7.5rem);
  --content-max-width: 1200px;
}