:root{
  /* Viewport Range for Calculations */
  --viewport-min: 23.438;
  --viewport-max: 75;
  --viewport-diff: calc(var(--viewport-max) - var(--viewport-min)); /* = 960 */

  --cmw-default-page-width: 1200px;
  --cmw-default-width: min(90%, var(--cmw-default-page-width));

  /* ---------------- Colors ---------------- */

  --cmw-secondary-card-background: #F9F9F9;
  --cmw-color-primary: #0072CE;
  --cmw-color-light: #fff;
  --cmw-color-dark: #000;
  --cmw-primary-color-filter: brightness(0) saturate(100%) invert(42%) sepia(91%) saturate(6627%) hue-rotate(194deg) brightness(96%) contrast(101%);

 /* ---------------- Paddings ---------------- */

 --cmw-primary-card-padding: 1.5rem; /* Default padding */

 --cmw-primary-card-box-shadow: 0 6px 24px 0 rgba(156, 149, 181, 0.30); /* Default box shadow */
 --cmw-shadow-size: 6px;
 --cmw-default-width-shadow-space: min(87%, calc(var(--cmw-default-page-width) + 2 * var(--cmw-shadow-size) ));
 
 --cmw-default-shadow: 0 8px 36px 0 rgba(156, 149, 181, 0.30);
}

.cmw-pattern.default-container{
    width: var(--cmw-default-width);
    margin-inline: auto;
}

.cmw-pattern.default-container.space-shadow{
    width: var(--cmw-default-width-shadow-space);
}

/* Consistent focus visible style */
.cmw-pattern.button a:focus-visible,
.cmw-pattern.search:has(input:focus-visible),
.cmw-pattern.card > div > a:focus-visible {
    outline: 2px solid oklch(from var(--cmw-color-primary) calc(l - 0.05) calc(c * 1.2) h) !important;
    outline-offset: 2px !important;
}