:root {
--client-name: 'Indoor Mania Winter Leagues';
--client-image: url("https://prod-assets.demosphere.com/1ecdo1uvcisjw/brand/6079e7eb44956dc5bce49cc1.1699043334288.png?versionId=JyhOqB3nQl3GAQ67CGWCDwqYfRwUuwqZ") no-repeat;
--client-avatar: url("https://prod-assets.demosphere.com/1ecdo1uvcisjw/brand/client.logo.6079e7eb44956dc5bce49cc1.1707752843354.png?versionId=w5j0DKmcX_AgjMv3c1mf1ssW37coXRX9") no-repeat;
--client-primary: #272727;
--client-secondary: #56b3f3;
--client-primary-darken: rgb(31, 31, 31);
--client-primary-lighten: rgb(57, 57, 57);
--client-sign-in-primary: #000000;
--client-sign-in-secondary: #4f4d4d;
}
:root {
  --color-client-25: #f8f8f8;
  --color-client-50: #f5f5f5;
  --color-client-100: #e8e8e8;
  --color-client-200: #d4d4d4;
  --color-client-300: #b7b7b7;
  --color-client-400: #8f8f8f;
  --color-client-500: #272727;
  --color-client-600: #1d1d1d;
  --color-client-700: #141414;
  --color-client-800: #0b0b0b;
  --color-client-900: #060606;
  --color-client-950: #020202;
  --color-client-header: #272727;
  --color-client-selected: #404040;
  --color-client-hover: #404040;
  --color-client-text: #969696;
  --color-client-footer: #2e2e2e;

  /* OKLCH values for modern browsers */
  --color-client-25-oklch: oklch(0.98 0 0);
  --color-client-50-oklch: oklch(0.97 0 0);
  --color-client-100-oklch: oklch(0.93 0 0);
  --color-client-200-oklch: oklch(0.87 0 0);
  --color-client-300-oklch: oklch(0.78 0 0);
  --color-client-400-oklch: oklch(0.65 0 0);
  --color-client-500-oklch: oklch(0.27274100075141233 0 0);
  --color-client-600-oklch: oklch(0.23182985063870049 0 0);
  --color-client-700-oklch: oklch(0.1909187005259886 0 0);
  --color-client-800-oklch: oklch(0.1500075504132768 0 0);
  --color-client-900-oklch: oklch(0.12273345033813556 0 0);
  --color-client-950-oklch: oklch(0.0818223002254237 0 0);
  --color-client-header-oklch: oklch(0.27274100075141233 0 0);
  --color-client-selected-oklch: oklch(0.37274100075141237 0 0);
  --color-client-hover-oklch: oklch(0.37274100075141237 0 0);
  --color-client-text-oklch: oklch(0.6727410007514123 0 0);
  --color-client-footer-oklch: oklch(0.3 0 0);
}

@supports (color: oklch(0 0 0)) {
  :root {
    --color-client-25: var(--color-client-25-oklch);
    --color-client-50: var(--color-client-50-oklch);
    --color-client-100: var(--color-client-100-oklch);
    --color-client-200: var(--color-client-200-oklch);
    --color-client-300: var(--color-client-300-oklch);
    --color-client-400: var(--color-client-400-oklch);
    --color-client-500: var(--color-client-500-oklch);
    --color-client-600: var(--color-client-600-oklch);
    --color-client-700: var(--color-client-700-oklch);
    --color-client-800: var(--color-client-800-oklch);
    --color-client-900: var(--color-client-900-oklch);
    --color-client-950: var(--color-client-950-oklch);
    --color-client-header: var(--color-client-header-oklch);
    --color-client-selected: var(--color-client-selected-oklch);
    --color-client-hover: var(--color-client-hover-oklch);
    --color-client-text: var(--color-client-text-oklch);
    --color-client-footer: var(--color-client-footer-oklch);
  }
}
:root {
  --color-client-secondary-25: #f7f9fa;
  --color-client-secondary-50: #f2f6f9;
  --color-client-secondary-100: #e1e9ef;
  --color-client-secondary-200: #c0d8ea;
  --color-client-secondary-300: #97bdd9;
  --color-client-secondary-400: #5b96c1;
  --color-client-secondary-500: #56b3f3;
  --color-client-secondary-600: #2f90ce;
  --color-client-secondary-700: #126ea3;
  --color-client-secondary-800: #004e78;
  --color-client-secondary-900: #023959;
  --color-client-secondary-950: #001d35;
  --color-client-secondary-header: #56b3f3;
  --color-client-secondary-selected: #77d4ff;
  --color-client-secondary-hover: #82d3ff;
  --color-client-secondary-text: #e5ffff;
  --color-client-secondary-footer: #4d93c4;

  /* OKLCH values for modern browsers */
  --color-client-secondary-25-oklch: oklch(0.98 0.0030748959056721976 241.52436373522085);
  --color-client-secondary-50-oklch: oklch(0.97 0.006149791811344395 241.52436373522085);
  --color-client-secondary-100-oklch: oklch(0.93 0.01229958362268879 241.52436373522085);
  --color-client-secondary-200-oklch: oklch(0.87 0.03587378556617564 241.52436373522085);
  --color-client-secondary-300-oklch: oklch(0.78 0.05765429823135371 241.52436373522085);
  --color-client-secondary-400-oklch: oklch(0.65 0.08968446391543909 241.52436373522085);
  --color-client-secondary-500-oklch: oklch(0.7369233947543906 0.12812066273634157 241.52436373522085);
  --color-client-secondary-600-oklch: oklch(0.6263848855412321 0.12812066273634157 241.52436373522085);
  --color-client-secondary-700-oklch: oklch(0.5158463763280734 0.11530859646270741 241.52436373522085);
  --color-client-secondary-800-oklch: oklch(0.40530786711491484 0.09609049705225617 241.52436373522085);
  --color-client-secondary-900-oklch: oklch(0.33161552763947577 0.07687239764180494 241.52436373522085);
  --color-client-secondary-950-oklch: oklch(0.2210770184263172 0.06406033136817078 241.52436373522085);
  --color-client-secondary-header-oklch: oklch(0.7369233947543906 0.12812066273634157 241.52436373522085);
  --color-client-secondary-selected-oklch: oklch(0.8369233947543906 0.12812066273634157 241.52436373522085);
  --color-client-secondary-hover-oklch: oklch(0.8369233947543906 0.11530859646270741 241.52436373522085);
  --color-client-secondary-text-oklch: oklch(1 0.046123438585082964 241.52436373522085);
  --color-client-secondary-footer-oklch: oklch(0.6369233947543906 0.10249653018907326 241.52436373522085);
}

@supports (color: oklch(0 0 0)) {
  :root {
    --color-client-secondary-25: var(--color-client-secondary-25-oklch);
    --color-client-secondary-50: var(--color-client-secondary-50-oklch);
    --color-client-secondary-100: var(--color-client-secondary-100-oklch);
    --color-client-secondary-200: var(--color-client-secondary-200-oklch);
    --color-client-secondary-300: var(--color-client-secondary-300-oklch);
    --color-client-secondary-400: var(--color-client-secondary-400-oklch);
    --color-client-secondary-500: var(--color-client-secondary-500-oklch);
    --color-client-secondary-600: var(--color-client-secondary-600-oklch);
    --color-client-secondary-700: var(--color-client-secondary-700-oklch);
    --color-client-secondary-800: var(--color-client-secondary-800-oklch);
    --color-client-secondary-900: var(--color-client-secondary-900-oklch);
    --color-client-secondary-950: var(--color-client-secondary-950-oklch);
    --color-client-secondary-header: var(--color-client-secondary-header-oklch);
    --color-client-secondary-selected: var(--color-client-secondary-selected-oklch);
    --color-client-secondary-hover: var(--color-client-secondary-hover-oklch);
    --color-client-secondary-text: var(--color-client-secondary-text-oklch);
    --color-client-secondary-footer: var(--color-client-secondary-footer-oklch);
  }
}