:root {
  --primary: #38b6ff;
  --secondary: #0470ae;
  --dark: #111317;
  --white: #ffffff;

  /* Backgrounds */
  --color-bg-white: #ffffff;
  --color-bg-card: #eaf7ff;
  --color-bg-dark: #111317;
  --color-card-border: #d4eefe;

  /* Text */
  --text-primary: #111317;
  --text-body: #2f2f2f;
  --text-white: #ffffff;
  --text-accent: #38b6ff;

  /* UI / Borders */
  --border-input: #d2d2d2;
  --border-card: #d4eefe;
  --border-white: #ffffff;

  /* Gradients */
  --gradient-cta-primary: linear-gradient(107deg, #38b6ff 0%, #0470ae 100%);
  --gradient-cta-form: linear-gradient(126deg, #38b6ff 0%, #0470ae 100%);
  --gradient-card-bg: linear-gradient(133deg, #ffffff 29%, #d4eefe 100%);
  --gradient-card: linear-gradient(133deg, #ffffff 29%, #d4eefe 100%);
  --shadow-card-bottom: inset 0px -4px 0px 0px #0470ae;

  /* ---- TYPOGRAPHY — Font Families ---- */
  --global-font: "Rubik";
  --font-ui: "Rubik";
  --font-heading: "Rubik";

  /* ---- TYPOGRAPHY — Font Weights ---- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Button */
  --btn-bg: var(--gradient-cta-primary);

  /* Form */
  --form-bg: var(--bg-white);
  --input-border: 1px solid var(--border-input);
}