@layer abstracts.color {
  :root {
    --blue: #00A9CE;
    --blue-100: #97DCEB;
    --blue-200: #7DD3E6;
    --blue-300: #5CC8E0;
    --blue-400: #33BAD8;
    --blue-500: #00A9CE;
    --blue-600: #0090BC;
    --blue-700: #00689F;
    --blue-800: #00558F;
    --blue-900: #004181;
    --dark-blue: #002D72;
    --dark-blue-100: #0090BC;
    --dark-blue-200: #00689F;
    --dark-blue-300: #00558F;
    --dark-blue-400: #004181;
    --dark-blue-500: #002D72;
    --dark-blue-600: #00245B;
    --dark-blue-700: #001D49;
    --dark-blue-800: #00173A;
    --dark-blue-900: #00122E;
    --gray: #808080;
    --gray-50: #F2F2F2;
    --gray-100: #E5E5E5;
    --gray-150: #D9D9D9;
    --gray-200: #CCCCCC;
    --gray-300: #B2B2B2;
    --gray-400: #999999;
    --gray-500: #808080;
    --gray-600: #666666;
    --gray-700: #4D4D4D;
    --gray-800: #333333;
    --gray-900: #191919;
  }
}
@layer components.blocks.visual-numbered-list {
  .acf-block-visual-numbered-list {
    counter-reset: visual-numbered-list;
  }
  .acf-block-visual-numbered-list .item-description::before {
    counter-increment: visual-numbered-list;
    content: counter(visual-numbered-list);
    background-color: #00A9CE;
    color: #FFFFFF;
    border-radius: 100rem;
    aspect-ratio: 1;
    width: 2em;
    display: inline-block;
    position: absolute;
    inset: -0.35em calc(100% + var(--grid--gutter-width)) auto auto;
    display: grid;
    place-content: center;
    font-variant-numeric: tabular-nums;
  }
  .acf-block-visual-numbered-list .sub-item::marker {
    font-weight: 700;
  }
}