@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

/* -------------------------------------------- */

:root {
  /* -------------------------------------------- */
  /* Colors
  /* https://tinyurl.com/24rw9h7q
  /* -------------------------------------------- */

  --oc--color--hope-light-blue: #CDE4FC;
  --oc--color--light-blue-30-tint: #DCECFC;
  --oc--color--light-blue-60-tint: #EBF4FE;
  --oc--color--light-blue-tint-blue-3: #C7E1FC;
  --oc--color--navy-blue--opacity-80: rgba(14, 76, 140, 0.80);
  --oc--color--navy-blue: #0E4C8C;
  --oc--color--navy-text: #0D3669;
  --oc--color--new-blue: #007CF9;
  --oc--color--serious-coral: #F8AA8A;

  /* -------------------------------------------- */
  /* Layout
  /* -------------------------------------------- */

  --oc--screen--xs: 768px;
  --oc--screen--sm: 1024px;
  --oc--screen--md: 1280px;
  --oc--screen--lg: 1920px;

  /* -------------------------------------------- */
  /* Spacing
  /* -------------------------------------------- */

  --oc--spacing--03: 0.300rem; /* 4.80px */
  --oc--spacing--04: 0.375rem; /* 6.00px */
  --oc--spacing--05: 0.500rem; /* 8.00px */
  --oc--spacing--06: 0.625rem; /* 10.00px */
  --oc--spacing--07: 0.750rem; /* 12.00px */
  --oc--spacing--08: 0.875rem; /* 14.00px */
  --oc--spacing--10: 1.000rem; /* 16.00px */
  --oc--spacing--11: 1.125rem; /* 18.00px */
  --oc--spacing--12: 1.250rem; /* 20.00px */
  --oc--spacing--13: 1.375rem; /* 22.00px */
  --oc--spacing--15: 1.500rem; /* 24.00px */
  --oc--spacing--16: 1.625rem; /* 26.00px */
  --oc--spacing--17: 1.750rem; /* 28.00px */
  --oc--spacing--20: 2.000rem; /* 32.00px */
  --oc--spacing--25: 2.500rem; /* 40.00px */
  --oc--spacing--27: 2.750rem; /* 44.00px */
  --oc--spacing--30: 3.000rem; /* 48.00px */
  --oc--spacing--40: 4.000rem; /* 64.00px */
  --oc--spacing--50: 5.000rem; /* 80.00px */

  /* Clamp Range: 250px - 900px */
  --oc--spacing--clamp--10-20: clamp(var(--oc--spacing--10), 0.6154rem + 2.4615vw, var(--oc--spacing--20));
  --oc--spacing--clamp--30-40: clamp(var(--oc--spacing--30), 2.6154rem + 2.4615vw, var(--oc--spacing--40));

  /* -------------------------------------------- */
  /* Typography
  /* https://tinyurl.com/23krbxwt
  /* -------------------------------------------- */

  --oc--font-family--base: 'Roboto', sans-serif;

  /* -------------------------------------------- */
  /* Block: Wave Layout
  /* -------------------------------------------- */

  --oc--wave-layout--wave-height: clamp(1.875rem, 0.1613rem + 10.9677vw, 12.5rem); /* 30px @ 250px - 200px @ 1800px */
}