/**
 * Do not edit directly
 * Generated by cocokits 'scss-builder'
 */

:where(.cck-theme-frames-x__local-style--default),
:where([data-cck-theme*='frames-x__local-style--default']) {
  --text-xs-font-extralight: var(--font-weight-extra-light) var(--font-size-xs) / var(--line-height-xs)
    var(--font-family);
  --text-xs-font-light: var(--font-weight-light) var(--font-size-xs) / var(--line-height-xs) var(--font-family);
  --text-xs-font-regular: var(--font-weight-regular) var(--font-size-xs) / var(--line-height-xs) var(--font-family);
  --text-xs-font-medium: var(--font-weight-medium) var(--font-size-xs) / var(--line-height-xs) var(--font-family);
  --text-xs-font-semibold: var(--font-weight-semi-bold) var(--font-size-xs) / var(--line-height-xs) var(--font-family);
  --text-xs-font-bold: var(--font-weight-bold) var(--font-size-xs) / var(--line-height-xs) var(--font-family);
  --text-xs-font-extrabold: var(--font-weight-extra-bold) var(--font-size-xs) / var(--line-height-xs) var(--font-family);
  --text-sm-font-extralight: var(--font-weight-extra-light) var(--font-size-sm) / var(--line-height-sm)
    var(--font-family);
  --text-sm-font-light: var(--font-weight-light) var(--font-size-sm) / var(--line-height-sm) var(--font-family);
  --text-sm-font-regular: var(--font-weight-regular) var(--font-size-sm) / var(--line-height-sm) var(--font-family);
  --text-sm-font-medium: var(--font-weight-medium) var(--font-size-sm) / var(--line-height-sm) var(--font-family);
  --text-sm-font-semibold: var(--font-weight-semi-bold) var(--font-size-sm) / var(--line-height-sm) var(--font-family);
  --text-sm-font-bold: var(--font-weight-bold) var(--font-size-sm) / var(--line-height-sm) var(--font-family);
  --text-sm-font-extrabold: var(--font-weight-extra-bold) var(--font-size-sm) / var(--line-height-sm) var(--font-family);
  --text-base-font-extralight: var(--font-weight-extra-light) var(--font-size-base) / var(--line-height-base)
    var(--font-family);
  --text-base-font-light: var(--font-weight-light) var(--font-size-base) / var(--line-height-base) var(--font-family);
  --text-base-font-regular: var(--font-weight-regular) var(--font-size-base) / var(--line-height-base)
    var(--font-family);
  --text-base-font-medium: var(--font-weight-medium) var(--font-size-base) / var(--line-height-base) var(--font-family);
  --text-base-font-semibold: var(--font-weight-semi-bold) var(--font-size-base) / var(--line-height-base)
    var(--font-family);
  --text-base-font-bold: var(--font-weight-bold) var(--font-size-base) / var(--line-height-base) var(--font-family);
  --text-base-font-extrabold: var(--font-weight-extra-bold) var(--font-size-base) / var(--line-height-base)
    var(--font-family);
  --text-lg-font-extralight: var(--font-weight-extra-light) var(--font-size-lg) / var(--line-height-lg)
    var(--font-family);
  --text-lg-font-light: var(--font-weight-light) var(--font-size-lg) / var(--line-height-lg) var(--font-family);
  --text-lg-font-regular: var(--font-weight-regular) var(--font-size-lg) / var(--line-height-lg) var(--font-family);
  --text-lg-font-medium: var(--font-weight-medium) var(--font-size-lg) / var(--line-height-lg) var(--font-family);
  --text-lg-font-semibold: var(--font-weight-semi-bold) var(--font-size-lg) / var(--line-height-lg) var(--font-family);
  --text-lg-font-bold: var(--font-weight-bold) var(--font-size-lg) / var(--line-height-lg) var(--font-family);
  --text-lg-font-extrabold: var(--font-weight-extra-bold) var(--font-size-lg) / var(--line-height-lg) var(--font-family);
  --text-xl-font-extralight: var(--font-weight-extra-light) var(--font-size-xl) / var(--line-height-xl)
    var(--font-family);
  --text-xl-font-light: var(--font-weight-light) var(--font-size-xl) / var(--line-height-xl) var(--font-family);
  --text-xl-font-regular: var(--font-weight-regular) var(--font-size-xl) / var(--line-height-xl) var(--font-family);
  --text-xl-font-medium: var(--font-weight-medium) var(--font-size-xl) / var(--line-height-xl) var(--font-family);
  --text-xl-font-semibold: var(--font-weight-semi-bold) var(--font-size-xl) / var(--line-height-xl) var(--font-family);
  --text-xl-font-bold: var(--font-weight-bold) var(--font-size-xl) / var(--line-height-xl) var(--font-family);
  --text-xl-font-extrabold: var(--font-weight-extra-bold) var(--font-size-xl) / var(--line-height-xl) var(--font-family);
  --text-2xl-font-extralight: var(--font-weight-extra-light) var(--font-size-2xl) / var(--line-height-2xl)
    var(--font-family);
  --text-2xl-font-light: var(--font-weight-light) var(--font-size-2xl) / var(--line-height-2xl) var(--font-family);
  --text-2xl-font-regular: var(--font-weight-regular) var(--font-size-2xl) / var(--line-height-2xl) var(--font-family);
  --text-2xl-font-medium: var(--font-weight-medium) var(--font-size-2xl) / var(--line-height-2xl) var(--font-family);
  --text-2xl-font-semibold: var(--font-weight-semi-bold) var(--font-size-2xl) / var(--line-height-2xl)
    var(--font-family);
  --text-2xl-font-bold: var(--font-weight-bold) var(--font-size-2xl) / var(--line-height-2xl) var(--font-family);
  --text-2xl-font-extrabold: var(--font-weight-extra-bold) var(--font-size-2xl) / var(--line-height-2xl)
    var(--font-family);
  --text-3xl-font-extralight: var(--font-weight-extra-light) var(--font-size-3xl) / var(--line-height-3xl)
    var(--font-family);
  --text-3xl-font-light: var(--font-weight-light) var(--font-size-3xl) / var(--line-height-3xl) var(--font-family);
  --text-3xl-font-regular: var(--font-weight-regular) var(--font-size-3xl) / var(--line-height-3xl) var(--font-family);
  --text-3xl-font-medium: var(--font-weight-medium) var(--font-size-3xl) / var(--line-height-3xl) var(--font-family);
  --text-3xl-font-semibold: var(--font-weight-semi-bold) var(--font-size-3xl) / var(--line-height-3xl)
    var(--font-family);
  --text-3xl-font-bold: var(--font-weight-bold) var(--font-size-3xl) / var(--line-height-3xl) var(--font-family);
  --text-3xl-font-extrabold: var(--font-weight-extra-bold) var(--font-size-3xl) / var(--line-height-3xl)
    var(--font-family);
  --text-4xl-font-extralight: var(--font-weight-extra-light) var(--font-size-4xl) / var(--line-height-4xl)
    var(--font-family);
  --text-4xl-font-light: var(--font-weight-light) var(--font-size-4xl) / var(--line-height-4xl) var(--font-family);
  --text-4xl-font-regular: var(--font-weight-regular) var(--font-size-4xl) / var(--line-height-4xl) var(--font-family);
  --text-4xl-font-medium: var(--font-weight-medium) var(--font-size-4xl) / var(--line-height-4xl) var(--font-family);
  --text-4xl-font-semibold: var(--font-weight-semi-bold) var(--font-size-4xl) / var(--line-height-4xl)
    var(--font-family);
  --text-4xl-font-bold: var(--font-weight-bold) var(--font-size-4xl) / var(--line-height-4xl) var(--font-family);
  --text-4xl-font-extrabold: var(--font-weight-extra-bold) var(--font-size-4xl) / var(--line-height-4xl)
    var(--font-family);
  --text-5xl-font-extralight: var(--font-weight-extra-light) var(--font-size-5xl) / var(--line-height-5xl)
    var(--font-family);
  --text-5xl-font-light: var(--font-weight-light) var(--font-size-5xl) / var(--line-height-5xl) var(--font-family);
  --text-5xl-font-regular: var(--font-weight-regular) var(--font-size-5xl) / var(--line-height-5xl) var(--font-family);
  --text-5xl-font-medium: var(--font-weight-medium) var(--font-size-5xl) / var(--line-height-5xl) var(--font-family);
  --text-5xl-font-semibold: var(--font-weight-semi-bold) var(--font-size-5xl) / var(--line-height-5xl)
    var(--font-family);
  --text-5xl-font-bold: var(--font-weight-bold) var(--font-size-5xl) / var(--line-height-5xl) var(--font-family);
  --text-5xl-font-extrabold: var(--font-weight-extra-bold) var(--font-size-5xl) / var(--line-height-5xl)
    var(--font-family);
  --text-6xl-font-extralight: var(--font-weight-extra-light) var(--font-size-6xl) / var(--line-height-6xl)
    var(--font-family);
  --text-6xl-font-light: var(--font-weight-light) var(--font-size-6xl) / var(--line-height-6xl) var(--font-family);
  --text-6xl-font-regular: var(--font-weight-regular) var(--font-size-6xl) / var(--line-height-6xl) var(--font-family);
  --text-6xl-font-medium: var(--font-weight-medium) var(--font-size-6xl) / var(--line-height-6xl) var(--font-family);
  --text-6xl-font-semibold: var(--font-weight-semi-bold) var(--font-size-6xl) / var(--line-height-6xl)
    var(--font-family);
  --text-6xl-font-bold: var(--font-weight-bold) var(--font-size-6xl) / var(--line-height-6xl) var(--font-family);
  --text-6xl-font-extrabold: var(--font-weight-extra-bold) var(--font-size-6xl) / var(--line-height-6xl)
    var(--font-family);
  --text-7xl-font-extralight: var(--font-weight-extra-light) var(--font-size-7xl) / var(--line-height-7xl)
    var(--font-family);
  --text-7xl-font-light: var(--font-weight-light) var(--font-size-7xl) / var(--line-height-7xl) var(--font-family);
  --text-7xl-font-regular: var(--font-weight-regular) var(--font-size-7xl) / var(--line-height-7xl) var(--font-family);
  --text-7xl-font-medium: var(--font-weight-medium) var(--font-size-7xl) / var(--line-height-7xl) var(--font-family);
  --text-7xl-font-semibold: var(--font-weight-semi-bold) var(--font-size-7xl) / var(--line-height-7xl)
    var(--font-family);
  --text-7xl-font-bold: var(--font-weight-bold) var(--font-size-7xl) / var(--line-height-7xl) var(--font-family);
  --text-7xl-font-extrabold: var(--font-weight-extra-bold) var(--font-size-7xl) / var(--line-height-7xl)
    var(--font-family);
  --text-8xl-font-extralight: var(--font-weight-extra-light) var(--font-size-8xl) / var(--line-height-8xl)
    var(--font-family);
  --text-8xl-font-light: var(--font-weight-light) var(--font-size-8xl) / var(--line-height-8xl) var(--font-family);
  --text-8xl-font-regular: var(--font-weight-regular) var(--font-size-8xl) / var(--line-height-8xl) var(--font-family);
  --text-8xl-font-medium: var(--font-weight-medium) var(--font-size-8xl) / var(--line-height-8xl) var(--font-family);
  --text-8xl-font-semibold: var(--font-weight-semi-bold) var(--font-size-8xl) / var(--line-height-8xl)
    var(--font-family);
  --text-8xl-font-bold: var(--font-weight-bold) var(--font-size-8xl) / var(--line-height-8xl) var(--font-family);
  --text-8xl-font-extrabold: var(--font-weight-extra-bold) var(--font-size-8xl) / var(--line-height-8xl)
    var(--font-family);
  --text-9xl-font-extralight: var(--font-weight-extra-light) var(--font-size-9xl) / var(--line-height-9xl)
    var(--font-family);
  --text-9xl-font-light: var(--font-weight-light) var(--font-size-9xl) / var(--line-height-9xl) var(--font-family);
  --text-9xl-font-regular: var(--font-weight-regular) var(--font-size-9xl) / var(--line-height-9xl) var(--font-family);
  --text-9xl-font-medium: var(--font-weight-medium) var(--font-size-9xl) / var(--line-height-9xl) var(--font-family);
  --text-9xl-font-semibold: var(--font-weight-semi-bold) var(--font-size-9xl) / var(--line-height-9xl)
    var(--font-family);
  --text-9xl-font-bold: var(--font-weight-bold) var(--font-size-9xl) / var(--line-height-9xl) var(--font-family);
  --text-9xl-font-extrabold: var(--font-weight-extra-bold) var(--font-size-9xl) / var(--line-height-9xl)
    var(--font-family);
}
:where(.cck-theme-frames-x__sizing--compact),
:where([data-cck-theme*='frames-x__sizing--compact']) {
  --spacing-0: 0;
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-3: 4px;
  --spacing-4: 6px;
  --spacing-5: 8px;
  --spacing-6: 10px;
  --spacing-7: 12px;
  --spacing-8: 16px;
  --spacing-9: 20px;
  --spacing-10: 24px;
  --spacing-11: 28px;
  --spacing-12: 32px;
  --spacing-13: 36px;
  --spacing-14: 40px;
  --spacing-15: 44px;
  --spacing-16: 48px;
  --spacing-17: 56px;
  --spacing-18: 64px;
  --spacing-19: 72px;
  --spacing-20: 80px;
  --spacing-21: 96px;
  --spacing-22: 112px;
  --spacing-23: 120px;
  --spacing-24: 128px;
  --spacing-25: 144px;
  --spacing-26: 160px;
  --spacing-27: 192px;
  --spacing-28: 208px;
  --spacing-29: 224px;
  --spacing-30: 256px;
  --spacing-31: 288px;
  --spacing-32: 320px;
  --spacing-33: 384px;
  --stroke-xs: 0.5px;
  --stroke-sm: 1px;
  --stroke-md: 1.5px;
  --stroke-lg: 2px;
  --stroke-xl: 3px;
  --stroke-2xl: 4px;
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 28px;
  --icon-2xl: 32px;
  --icon-3xl: 40px;
  --icon-4xl: 44px;
}
:where(.cck-theme-frames-x__sizing--spacious),
:where([data-cck-theme*='frames-x__sizing--spacious']) {
  --spacing-0: 0;
  --spacing-1: 2px;
  --spacing-2: 4px;
  --spacing-3: 8px;
  --spacing-4: 10px;
  --spacing-5: 12px;
  --spacing-6: 14px;
  --spacing-7: 16px;
  --spacing-8: 20px;
  --spacing-9: 24px;
  --spacing-10: 28px;
  --spacing-11: 32px;
  --spacing-12: 36px;
  --spacing-13: 40px;
  --spacing-14: 44px;
  --spacing-15: 48px;
  --spacing-16: 56px;
  --spacing-17: 64px;
  --spacing-18: 76px;
  --spacing-19: 88px;
  --spacing-20: 96px;
  --spacing-21: 112px;
  --spacing-22: 120px;
  --spacing-23: 128px;
  --spacing-24: 144px;
  --spacing-25: 160px;
  --spacing-26: 192px;
  --spacing-27: 208px;
  --spacing-28: 224px;
  --spacing-29: 256px;
  --spacing-30: 288px;
  --spacing-31: 320px;
  --spacing-32: 384px;
  --spacing-33: 420px;
  --stroke-xs: 0.5px;
  --stroke-sm: 1px;
  --stroke-md: 1.5px;
  --stroke-lg: 2px;
  --stroke-xl: 3px;
  --stroke-2xl: 4px;
  --icon-xs: 14px;
  --icon-sm: 18px;
  --icon-md: 22px;
  --icon-lg: 26px;
  --icon-xl: 30px;
  --icon-2xl: 34px;
  --icon-3xl: 42px;
  --icon-4xl: 46px;
}
:where(.cck-theme-frames-x__theme--theme-a),
:where([data-cck-theme*='frames-x__theme--theme-a']) {
  --base-surface-1: var(--colors-alpha-light-900);
  --base-surface-2: var(--colors-gray-50);
  --base-fill-1: var(--colors-gray-100);
  --base-fill-2: var(--colors-gray-200);
  --base-fill-3: var(--colors-gray-300);
  --base-fill-4: var(--colors-gray-400);
  --base-fill-5: var(--colors-gray-600);
  --base-border: var(--colors-gray-200);
  --base-disabled: var(--colors-alpha-dark-200);
  --state-brand-active: var(--colors-blue-600);
  --state-brand-hover: var(--colors-blue-500);
  --state-brand-selected: var(--colors-blue-400);
  --state-danger-active: var(--colors-red-600);
  --state-danger-hover: var(--colors-red-400);
  --state-danger-selected: var(--colors-red-200);
  --state-highlight-active: var(--colors-orange-600);
  --state-highlight-hover: var(--colors-orange-300);
  --state-highlight-selected: var(--colors-orange-200);
  --state-success-active: var(--colors-green-600);
  --state-success-hover: var(--colors-green-400);
  --state-success-selected: var(--colors-green-300);
}
:where(.cck-theme-frames-x__theme--theme-b),
:where([data-cck-theme*='frames-x__theme--theme-b']) {
  --base-surface-1: var(--colors-alpha-light-900);
  --base-surface-2: var(--colors-bronze-50);
  --base-fill-1: var(--colors-bronze-100);
  --base-fill-2: var(--colors-bronze-200);
  --base-fill-3: var(--colors-bronze-300);
  --base-fill-4: var(--colors-bronze-400);
  --base-fill-5: var(--colors-bronze-600);
  --base-border: var(--colors-bronze-200);
  --base-disabled: var(--colors-alpha-dark-200);
  --state-brand-active: var(--colors-orange-600);
  --state-brand-hover: var(--colors-orange-500);
  --state-brand-selected: var(--colors-orange-400);
  --state-danger-active: var(--colors-rose-600);
  --state-danger-hover: var(--colors-rose-400);
  --state-danger-selected: var(--colors-rose-200);
  --state-highlight-active: var(--colors-purple-600);
  --state-highlight-hover: var(--colors-purple-300);
  --state-highlight-selected: var(--colors-purple-200);
  --state-success-active: var(--colors-teal-600);
  --state-success-hover: var(--colors-teal-400);
  --state-success-selected: var(--colors-teal-300);
}
:where(.cck-theme-frames-x__color-mode--light),
:where([data-cck-theme*='frames-x__color-mode--light']) {
  --colors-alpha-light-50: #ffffff14;
  --colors-alpha-light-100: #ffffff1f;
  --colors-alpha-light-200: #ffffff2e;
  --colors-alpha-light-300: #ffffff42;
  --colors-alpha-light-400: #ffffff5c;
  --colors-alpha-light-500: #ffffff7a;
  --colors-alpha-light-600: #ffffff99;
  --colors-alpha-light-700: #ffffffb2;
  --colors-alpha-light-900: #fff;
  --colors-alpha-light-00: #ffffff00;
  --colors-alpha-dark-50: #1a1a1a14;
  --colors-alpha-dark-100: #1a1a1a1f;
  --colors-alpha-dark-200: #1a1a1a2e;
  --colors-alpha-dark-300: #1a1a1a42;
  --colors-alpha-dark-400: #1a1a1a5c;
  --colors-alpha-dark-500: #1a1a1a7a;
  --colors-alpha-dark-600: #1a1a1a99;
  --colors-alpha-dark-700: #1a1a1ab2;
  --colors-alpha-dark-900: #1a1a1a;
  --colors-alpha-dark-00: #1a1a1a00;
  --colors-blue-50: #f2f7ff;
  --colors-blue-100: #dcebfe;
  --colors-blue-200: #bedbfe;
  --colors-blue-300: #91c3fd;
  --colors-blue-400: #61a6fa;
  --colors-blue-500: #3479e9;
  --colors-blue-600: #1559ea;
  --colors-blue-700: #173fab;
  --colors-blue-800: #162f82;
  --colors-blue-900: #0c1736;
  --colors-purple-50: #faf5ff;
  --colors-purple-100: #f2e5ff;
  --colors-purple-200: #ead6ff;
  --colors-purple-300: #d3a9fe;
  --colors-purple-400: #b774fc;
  --colors-purple-500: #a046f6;
  --colors-purple-600: #8318e7;
  --colors-purple-700: #7620c1;
  --colors-purple-800: #5f1e95;
  --colors-purple-900: #381254;
  --colors-gray-50: #fcfcfc;
  --colors-gray-100: #f4f4f5;
  --colors-gray-200: #e1e1e2;
  --colors-gray-300: #d0d0d4;
  --colors-gray-400: #a1a1aa;
  --colors-gray-500: #7a7a83;
  --colors-gray-600: #52525b;
  --colors-gray-700: #3f3f46;
  --colors-gray-800: #27272a;
  --colors-gray-900: #1d1d20;
  --colors-green-50: #f2fdf5;
  --colors-green-100: #defce9;
  --colors-green-200: #bbf7d0;
  --colors-green-300: #61ea94;
  --colors-green-400: #30d96e;
  --colors-green-500: #18b451;
  --colors-green-600: #149041;
  --colors-green-700: #137236;
  --colors-green-800: #196636;
  --colors-green-900: #0e3f22;
  --colors-red-50: #fef1f1;
  --colors-red-100: #ffdcdc;
  --colors-red-200: #ffc9c9;
  --colors-red-300: #ffa0a0;
  --colors-red-400: #ff6565;
  --colors-red-500: #ef4343;
  --colors-red-600: #dc2828;
  --colors-red-700: #b11b1b;
  --colors-red-800: #821717;
  --colors-red-900: #531313;
  --colors-yellow-50: #fefce7;
  --colors-yellow-100: #fef9c3;
  --colors-yellow-200: #fef08b;
  --colors-yellow-300: #ffe561;
  --colors-yellow-400: #fac905;
  --colors-yellow-500: #d9a508;
  --colors-yellow-600: #bc7c10;
  --colors-yellow-700: #935806;
  --colors-yellow-800: #73430c;
  --colors-yellow-900: #4f2b0c;
  --colors-blue-gray-50: #f8fafc;
  --colors-blue-gray-100: #f1f5f9;
  --colors-blue-gray-200: #e1e7ef;
  --colors-blue-gray-300: #c8d6e5;
  --colors-blue-gray-400: #9eacc0;
  --colors-blue-gray-500: #65758b;
  --colors-blue-gray-600: #48566a;
  --colors-blue-gray-700: #344256;
  --colors-blue-gray-800: #1d283a;
  --colors-blue-gray-900: #0f1729;
  --colors-bronze-50: #fafaf9;
  --colors-bronze-100: #f5f5f4;
  --colors-bronze-200: #e7e5e4;
  --colors-bronze-300: #d6d3d1;
  --colors-bronze-400: #a8a29f;
  --colors-bronze-500: #78726d;
  --colors-bronze-600: #56524e;
  --colors-bronze-700: #44403c;
  --colors-bronze-800: #292524;
  --colors-bronze-900: #1c1a17;
  --colors-cyan-50: #ebfeff;
  --colors-cyan-100: #a5f6fd;
  --colors-cyan-200: #6bebfa;
  --colors-cyan-300: #2cdff7;
  --colors-cyan-400: #10b7d1;
  --colors-cyan-500: #058ea3;
  --colors-cyan-600: #066b84;
  --colors-cyan-700: #094f62;
  --colors-cyan-800: #0c3845;
  --colors-cyan-900: #0b2832;
  --colors-emerald-50: #f0fdf7;
  --colors-emerald-100: #c8f9e0;
  --colors-emerald-200: #a2fbd2;
  --colors-emerald-300: #6ee7b7;
  --colors-emerald-400: #36d399;
  --colors-emerald-500: #10b77f;
  --colors-emerald-600: #047b56;
  --colors-emerald-700: #036348;
  --colors-emerald-800: #054835;
  --colors-emerald-900: #042f24;
  --colors-fuchsia-50: #fdf5ff;
  --colors-fuchsia-100: #f9e5ff;
  --colors-fuchsia-200: #f3c8fe;
  --colors-fuchsia-300: #ed9dfb;
  --colors-fuchsia-400: #e66df8;
  --colors-fuchsia-500: #d73fee;
  --colors-fuchsia-600: #b725ca;
  --colors-fuchsia-700: #8b1995;
  --colors-fuchsia-800: #611268;
  --colors-fuchsia-900: #400f43;
  --colors-indigo-50: #f3f6ff;
  --colors-indigo-100: #e0e8ff;
  --colors-indigo-200: #c8d3fe;
  --colors-indigo-300: #aab8ff;
  --colors-indigo-400: #8c96fc;
  --colors-indigo-500: #6b6ef8;
  --colors-indigo-600: #5048e5;
  --colors-indigo-700: #3a2fb2;
  --colors-indigo-800: #26206f;
  --colors-indigo-900: #17163c;
  --colors-sky-blue-50: #f0f9ff;
  --colors-sky-blue-100: #dcf1fe;
  --colors-sky-blue-200: #abdffd;
  --colors-sky-blue-300: #6ecffc;
  --colors-sky-blue-400: #2bbaf7;
  --colors-sky-blue-500: #0f9ee1;
  --colors-sky-blue-600: #027ab6;
  --colors-sky-blue-700: #02527d;
  --colors-sky-blue-800: #053a57;
  --colors-sky-blue-900: #062537;
  --colors-lime-50: #f7fee7;
  --colors-lime-100: #e9fcc5;
  --colors-lime-200: #d5f895;
  --colors-lime-300: #baf15b;
  --colors-lime-400: #91d624;
  --colors-lime-500: #74b710;
  --colors-lime-600: #5b930b;
  --colors-lime-700: #365908;
  --colors-lime-800: #24380a;
  --colors-lime-900: #182509;
  --colors-metal-50: #f4f9fa;
  --colors-metal-100: #f0f2f4;
  --colors-metal-200: #dfe2e7;
  --colors-metal-300: #c6cbd2;
  --colors-metal-400: #929aaa;
  --colors-metal-500: #696f7d;
  --colors-metal-600: #3d444d;
  --colors-metal-700: #2b3340;
  --colors-metal-800: #202a36;
  --colors-metal-900: #151b28;
  --colors-orange-50: #fff6eb;
  --colors-orange-100: #ffedd6;
  --colors-orange-200: #fed6a9;
  --colors-orange-300: #fdba72;
  --colors-orange-400: #fb923c;
  --colors-orange-500: #f67416;
  --colors-orange-600: #e4570c;
  --colors-orange-700: #b63c0b;
  --colors-orange-800: #80310f;
  --colors-orange-900: #471a0a;
  --colors-pink-50: #fdf2f8;
  --colors-pink-100: #fce8f4;
  --colors-pink-200: #fbd0e8;
  --colors-pink-300: #f9a9d5;
  --colors-pink-400: #f471b5;
  --colors-pink-500: #ec4b9c;
  --colors-pink-600: #da2576;
  --colors-pink-700: #9f144d;
  --colors-pink-800: #660f32;
  --colors-pink-900: #520f2a;
  --colors-rose-50: #fff0f1;
  --colors-rose-100: #ffe5e7;
  --colors-rose-200: #fec3ca;
  --colors-rose-300: #fd9ba6;
  --colors-rose-400: #fb657c;
  --colors-rose-500: #f33454;
  --colors-rose-600: #cb1a41;
  --colors-rose-700: #950e30;
  --colors-rose-800: #650b24;
  --colors-rose-900: #500b20;
  --colors-teal-50: #e7fff8;
  --colors-teal-100: #cbfbf0;
  --colors-teal-200: #a0fbe8;
  --colors-teal-300: #5dead5;
  --colors-teal-400: #2bd4bd;
  --colors-teal-500: #14b8a5;
  --colors-teal-600: #0c887e;
  --colors-teal-700: #0e6c65;
  --colors-teal-800: #0c4542;
  --colors-teal-900: #0c312f;
  --colors-violet-50: #f7f6ff;
  --colors-violet-100: #e2ddfe;
  --colors-violet-200: #dad2fe;
  --colors-violet-300: #b7a6fd;
  --colors-violet-400: #9876f9;
  --colors-violet-500: #8e4dff;
  --colors-violet-600: #7127f1;
  --colors-violet-700: #6022c3;
  --colors-violet-800: #36146c;
  --colors-violet-900: #230d44;
  --text-light-primary: var(--colors-alpha-light-900);
  --text-light-secondary: var(--colors-alpha-light-700);
  --text-light-tertiary: var(--colors-alpha-light-400);
  --text-dark-primary: var(--colors-alpha-dark-900);
  --text-dark-secondary: var(--colors-alpha-dark-700);
  --text-dark-tertiary: var(--colors-alpha-dark-400);
  --blur-0: 0;
  --blur-1: 3px;
  --blur-2: 5px;
  --blur-3: 7px;
  --blur-4: 9px;
  --blur-5: 12px;
  --blur-6: 16px;
  --blur-7: 24px;
  --blur-8: 40px;
  --blur-9: 64px;
  --blur-10: 80px;
  --blur-11: 100px;
}
:where(.cck-theme-frames-x__color-mode--dark),
:where([data-cck-theme*='frames-x__color-mode--dark']) {
  --colors-alpha-light-50: #14141414;
  --colors-alpha-light-100: #1414141f;
  --colors-alpha-light-200: #1414142e;
  --colors-alpha-light-300: #14141442;
  --colors-alpha-light-400: #1414145c;
  --colors-alpha-light-500: #1414147a;
  --colors-alpha-light-600: #14141499;
  --colors-alpha-light-700: #141414b2;
  --colors-alpha-light-900: #141414;
  --colors-alpha-light-00: #14141400;
  --colors-alpha-dark-50: #ffffff14;
  --colors-alpha-dark-100: #ffffff1f;
  --colors-alpha-dark-200: #ffffff2e;
  --colors-alpha-dark-300: #ffffff42;
  --colors-alpha-dark-400: #ffffff5c;
  --colors-alpha-dark-500: #ffffff7a;
  --colors-alpha-dark-600: #ffffff99;
  --colors-alpha-dark-700: #ffffffb2;
  --colors-alpha-dark-900: #fff;
  --colors-alpha-dark-00: #ffffff00;
  --colors-blue-50: #181d34;
  --colors-blue-100: #0a2f85;
  --colors-blue-200: #1347cc;
  --colors-blue-300: #0f59e2;
  --colors-blue-400: #357aea;
  --colors-blue-500: #2e88f6;
  --colors-blue-600: #50a1ff;
  --colors-blue-700: #7ab7ff;
  --colors-blue-800: #dcebfe;
  --colors-blue-900: #f0f6ff;
  --colors-purple-50: #261236;
  --colors-purple-100: #461a66;
  --colors-purple-200: #6b1daf;
  --colors-purple-300: #8b25e4;
  --colors-purple-400: #ab57ff;
  --colors-purple-500: #d07fff;
  --colors-purple-600: #e9a0ff;
  --colors-purple-700: #ffbcff;
  --colors-purple-800: #ffd6ff;
  --colors-purple-900: #ffefff;
  --colors-gray-50: #231f1f;
  --colors-gray-100: #333;
  --colors-gray-200: #3d3d3d;
  --colors-gray-300: #5f5f5f;
  --colors-gray-400: #747474;
  --colors-gray-500: #878787;
  --colors-gray-600: #9b9b9b;
  --colors-gray-700: #b9b9b9;
  --colors-gray-800: #d7d7d7;
  --colors-gray-900: #efefef;
  --colors-green-50: #0d3117;
  --colors-green-100: #14522d;
  --colors-green-200: #166434;
  --colors-green-300: #119541;
  --colors-green-400: #21c45d;
  --colors-green-500: #4ade80;
  --colors-green-600: #85efac;
  --colors-green-700: #bbf7d0;
  --colors-green-800: #defce9;
  --colors-green-900: #f2fdf5;
  --colors-red-50: #461a1a;
  --colors-red-100: #6b1919;
  --colors-red-200: #a42828;
  --colors-red-300: #dc3d3d;
  --colors-red-400: #fa4d4d;
  --colors-red-500: #ff6262;
  --colors-red-600: #ff9393;
  --colors-red-700: #ffa7a7;
  --colors-red-800: #fbb;
  --colors-red-900: #fed0d0;
  --colors-yellow-50: #322910;
  --colors-yellow-100: #663a08;
  --colors-yellow-200: #a26107;
  --colors-yellow-300: #c88a04;
  --colors-yellow-400: #e7b008;
  --colors-yellow-500: #facc14;
  --colors-yellow-600: #fddf49;
  --colors-yellow-700: #fef08b;
  --colors-yellow-800: #fefacb;
  --colors-yellow-900: #fefce6;
  --colors-blue-gray-50: #0c101c;
  --colors-blue-gray-100: #1a2332;
  --colors-blue-gray-200: #252e3c;
  --colors-blue-gray-300: #323b49;
  --colors-blue-gray-400: #5e6d82;
  --colors-blue-gray-500: #8b9bb2;
  --colors-blue-gray-600: #b1c0d2;
  --colors-blue-gray-700: #d4dce8;
  --colors-blue-gray-800: #e2ebf3;
  --colors-blue-gray-900: #f8fafc;
  --colors-bronze-50: #1c1917;
  --colors-bronze-100: #2c2726;
  --colors-bronze-200: #4f4944;
  --colors-bronze-300: #5e5a56;
  --colors-bronze-400: #78726d;
  --colors-bronze-500: #a8a29f;
  --colors-bronze-600: #d6d3d1;
  --colors-bronze-700: #e7e5e4;
  --colors-bronze-800: #f5f5f4;
  --colors-bronze-900: #fafaf9;
  --colors-cyan-50: #0a2833;
  --colors-cyan-100: #114d5f;
  --colors-cyan-200: #0e708b;
  --colors-cyan-300: #0887a6;
  --colors-cyan-400: #07a9c5;
  --colors-cyan-500: #20d3ee;
  --colors-cyan-600: #20d3ee;
  --colors-cyan-700: #67e8f9;
  --colors-cyan-800: #cdfafe;
  --colors-cyan-900: #ebfeff;
  --colors-emerald-50: #042a20;
  --colors-emerald-100: #054835;
  --colors-emerald-200: #036347;
  --colors-emerald-300: #059467;
  --colors-emerald-400: #0ea472;
  --colors-emerald-500: #36d399;
  --colors-emerald-600: #6ee7b7;
  --colors-emerald-700: #a5f3cf;
  --colors-emerald-800: #d1fae5;
  --colors-emerald-900: #edfdf5;
  --colors-fuchsia-50: #330836;
  --colors-fuchsia-100: #591160;
  --colors-fuchsia-200: #7a1683;
  --colors-fuchsia-300: #a421b5;
  --colors-fuchsia-400: #d535ed;
  --colors-fuchsia-500: #e87bf9;
  --colors-fuchsia-600: #f0abfc;
  --colors-fuchsia-700: #f5d2fe;
  --colors-fuchsia-800: #f9e5ff;
  --colors-fuchsia-900: #fdf5ff;
  --colors-indigo-50: #141235;
  --colors-indigo-100: #2a247b;
  --colors-indigo-200: #342ba1;
  --colors-indigo-300: #3d34ea;
  --colors-indigo-400: #6467f2;
  --colors-indigo-500: #828df8;
  --colors-indigo-600: #a6b4fc;
  --colors-indigo-700: #c8d3fe;
  --colors-indigo-800: #e0e8ff;
  --colors-indigo-900: #f0f3ff;
  --colors-sky-blue-50: #051f2e;
  --colors-sky-blue-100: #043752;
  --colors-sky-blue-200: #024c73;
  --colors-sky-blue-300: #02699d;
  --colors-sky-blue-400: #0b8ecb;
  --colors-sky-blue-500: #35bdf8;
  --colors-sky-blue-600: #78d2fc;
  --colors-sky-blue-700: #b5e3fd;
  --colors-sky-blue-800: #dcf1fe;
  --colors-sky-blue-900: #f0f9ff;
  --colors-lime-50: #182707;
  --colors-lime-100: #2f490d;
  --colors-lime-200: #3e650b;
  --colors-lime-300: #5b940a;
  --colors-lime-400: #6aa70e;
  --colors-lime-500: #95da26;
  --colors-lime-600: #bef263;
  --colors-lime-700: #d9f99f;
  --colors-lime-800: #ebfcca;
  --colors-lime-900: #f7fee7;
  --colors-metal-50: #121721;
  --colors-metal-100: #242e3d;
  --colors-metal-200: #394251;
  --colors-metal-300: #49525f;
  --colors-metal-400: #747d90;
  --colors-metal-500: #969dab;
  --colors-metal-600: #c9cdd4;
  --colors-metal-700: #dfe2e7;
  --colors-metal-800: #f3f4f6;
  --colors-metal-900: #f9fafb;
  --colors-orange-50: #31160d;
  --colors-orange-100: #852c0f;
  --colors-orange-200: #ab4827;
  --colors-orange-300: #ce5a07;
  --colors-orange-400: #f27013;
  --colors-orange-500: #fb923c;
  --colors-orange-600: #fdba72;
  --colors-orange-700: #fed6a9;
  --colors-orange-800: #ffedd6;
  --colors-orange-900: #fff6eb;
  --colors-pink-50: #450d23;
  --colors-pink-100: #660f32;
  --colors-pink-200: #a3144f;
  --colors-pink-300: #c4216a;
  --colors-pink-400: #ec4699;
  --colors-pink-500: #f471b5;
  --colors-pink-600: #f9a9d5;
  --colors-pink-700: #fbd0e8;
  --colors-pink-800: #fce8f4;
  --colors-pink-900: #fdf2f8;
  --colors-rose-50: #430a1b;
  --colors-rose-100: #6a0c26;
  --colors-rose-200: #a81036;
  --colors-rose-300: #d11a42;
  --colors-rose-400: #f43e5c;
  --colors-rose-500: #fb6f84;
  --colors-rose-600: #fda5af;
  --colors-rose-700: #fecdd3;
  --colors-rose-800: #ffe5e7;
  --colors-rose-900: #fff0f1;
  --colors-teal-50: #092524;
  --colors-teal-100: #0b3d3a;
  --colors-teal-200: #0b514c;
  --colors-teal-300: #11736b;
  --colors-teal-400: #12a18f;
  --colors-teal-500: #28c3ae;
  --colors-teal-600: #5dead5;
  --colors-teal-700: #98f6e3;
  --colors-teal-800: #cbfbf0;
  --colors-teal-900: #f2fdfa;
  --colors-violet-50: #171330;
  --colors-violet-100: #331362;
  --colors-violet-200: #473493;
  --colors-violet-300: #7c3bed;
  --colors-violet-400: #895af6;
  --colors-violet-500: #a689fa;
  --colors-violet-600: #c3b4fd;
  --colors-violet-700: #ded7fe;
  --colors-violet-800: #ebe7fe;
  --colors-violet-900: #f6f5ff;
  --text-light-primary: var(--colors-alpha-light-900);
  --text-light-secondary: var(--colors-alpha-light-700);
  --text-light-tertiary: var(--colors-alpha-light-400);
  --text-dark-primary: var(--colors-alpha-dark-900);
  --text-dark-secondary: var(--colors-alpha-dark-700);
  --text-dark-tertiary: var(--colors-alpha-dark-400);
  --blur-0: 0;
  --blur-1: 3px;
  --blur-2: 5px;
  --blur-3: 7px;
  --blur-4: 9px;
  --blur-5: 12px;
  --blur-6: 16px;
  --blur-7: 24px;
  --blur-8: 40px;
  --blur-9: 64px;
  --blur-10: 80px;
  --blur-11: 100px;
}
:where(.cck-theme-frames-x__radius--default),
:where([data-cck-theme*='frames-x__radius--default']) {
  --radi-0: 0;
  --radi-1: 2px;
  --radi-2: 4px;
  --radi-3: 6px;
  --radi-4: 8px;
  --radi-5: 10px;
  --radi-6: 12px;
  --radi-7: 16px;
  --radi-8: 22px;
  --radi-9: 28px;
  --radi-10: 1000px;
}
:where(.cck-theme-frames-x__radius--rounded),
:where([data-cck-theme*='frames-x__radius--rounded']) {
  --radi-0: 0;
  --radi-1: 4px;
  --radi-2: 6px;
  --radi-3: 10px;
  --radi-4: 14px;
  --radi-5: 16px;
  --radi-6: 18px;
  --radi-7: 24px;
  --radi-8: 32px;
  --radi-9: 40px;
  --radi-10: 2000px;
}
:where(.cck-theme-frames-x__radius--sharp),
:where([data-cck-theme*='frames-x__radius--sharp']) {
  --radi-0: 0;
  --radi-1: 0;
  --radi-2: 0;
  --radi-3: 0;
  --radi-4: 0;
  --radi-5: 0;
  --radi-6: 0;
  --radi-7: 0;
  --radi-8: 0;
  --radi-9: 0;
  --radi-10: 0;
}
:where(.cck-theme-frames-x__typography--font-a),
:where([data-cck-theme*='frames-x__typography--font-a']) {
  --font-weight-extra-light: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-family: Inter;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  --font-size-6xl: 60px;
  --font-size-7xl: 72px;
  --font-size-8xl: 96px;
  --font-size-9xl: 128px;
  --line-height-xs: 18px;
  --line-height-sm: 22px;
  --line-height-base: 24px;
  --line-height-lg: 28px;
  --line-height-xl: 32px;
  --line-height-2xl: 38px;
  --line-height-3xl: 42px;
  --line-height-4xl: 52px;
  --line-height-5xl: 64px;
  --line-height-6xl: 86px;
  --line-height-7xl: 108px;
  --line-height-8xl: 144px;
  --line-height-9xl: 192px;
  --letter-spacing-base: 0;
  --letter-spacing-sm: 0.6px;
  --letter-spacing-md: 1.2px;
  --letter-spacing-lg: 2px;
  --letter-spacing-xl: 3px;
}
:where(.cck-theme-frames-x__typography--font-b),
:where([data-cck-theme*='frames-x__typography--font-b']) {
  --font-weight-extra-light: 400;
  --font-weight-light: 400;
  --font-weight-regular: 500;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 600;
  --font-weight-extra-bold: 700;
  --font-family: PT Serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  --font-size-6xl: 60px;
  --font-size-7xl: 72px;
  --font-size-8xl: 96px;
  --font-size-9xl: 128px;
  --line-height-xs: 18px;
  --line-height-sm: 22px;
  --line-height-base: 24px;
  --line-height-lg: 28px;
  --line-height-xl: 32px;
  --line-height-2xl: 38px;
  --line-height-3xl: 42px;
  --line-height-4xl: 52px;
  --line-height-5xl: 64px;
  --line-height-6xl: 86px;
  --line-height-7xl: 108px;
  --line-height-8xl: 144px;
  --line-height-9xl: 192px;
  --letter-spacing-base: 0;
  --letter-spacing-sm: 0.8px;
  --letter-spacing-md: 1.4px;
  --letter-spacing-lg: 2.2px;
  --letter-spacing-xl: 3.2px;
}