@layer theme {
  /* Brand */
  :root {
    /* 21 */
    /* color */
    --color-comp-banner-bg-default: rgb(38 38 38);
    --color-comp-banner-content-default: rgb(255 255 255);
    --color-comp-banner-content-highlight: var(--color-accent-default);
    --color-comp-card-ring: var(--color-neutral-ring-subtle);
    --color-comp-header-bg: rgb(0 0 0 / 0);
    --color-comp-header-overlay-bg: var(--color-neutral-surface-low);
    --color-comp-header-button-content: var(--color-neutral-content-secondary);
    --color-comp-header-cta-button-bg: var(--color-brand-default);
    --color-comp-header-cta-button-content: var(--color-neutral-surface-lowest);
    --color-comp-input-bg: var(--color-neutral-surface-lowest);
    --color-comp-nav-menu-bg: var(--color-neutral-surface-lowest);
    --color-comp-nav-menu-content: var(--color-neutral-content-primary);
    --color-comp-nav-menu-button-content: var(--color-neutral-content-secondary);
    --color-comp-nav-menu-tab-border-activated: var(--color-brand-default);
    --color-comp-nav-menu-tab-icon-activated: var(--color-brand-default);
    --color-comp-nav-menu-tab-icon-default: var(--color-neutral-content-secondary);
    --color-comp-nav-menu-tab-label-activated: var(--color-neutral-content-primary);
    --color-comp-nav-menu-tab-label-default: var(--color-neutral-content-secondary);
    --color-comp-navbar-bg: var(--color-neutral-surface-high);
    --color-comp-navbar-tab-border-activated: var(--color-brand-default);
    --color-comp-navbar-tab-icon-activated: var(--color-brand-default);
    --color-comp-navbar-tab-icon-default: var(--color-neutral-content-secondary);
    --color-comp-navbar-tab-label-activated: var(--color-neutral-content-primary);
    --color-comp-navbar-tab-label-default: var(--color-neutral-content-secondary);
    --color-comp-thumbnail-bg: var(--color-brand-surface);
    --color-comp-thumbnail-content: var(--color-brand-default);
    --color-accent-default: rgb(190 255 121);
    --color-brand-default: rgb(190 255 121);
    --color-brand-onDefault: rgb(13 21 5);
    --color-brand-ring: rgb(36 58 13);
    --color-brand-surface: rgb(13 21 5);
    --color-fade-default: rgb(28 30 38 / 0);
    --color-fade-high: rgb(38 41 51 / 0);
    --color-fade-low: rgb(18 20 26 / 0);
    --color-fade-lowest: rgb(0 0 0 / 0);
    --color-info-default: rgb(89 153 218);
    --color-info-onDefault: rgb(242 247 252);
    --color-info-ring: rgb(25 47 95);
    --color-info-surface: rgb(6 11 21);
    --color-negative-default: rgb(228 85 79);
    --color-negative-onDefault: rgb(253 246 246);
    --color-negative-outline: rgb(102 23 12);
    --color-negative-surface: rgb(16 4 2);
    --color-neutral-content-primary: rgb(255 255 255);
    --color-neutral-content-secondary: rgb(226 226 226);
    --color-neutral-content-tertiary: rgb(181 181 181);
    --color-neutral-ring-default: rgb(77 77 77);
    --color-neutral-ring-subtle: rgb(51 51 51);
    --color-neutral-surface-high: rgb(38 38 38);
    --color-neutral-surface-low: rgb(20 20 20);
    --color-neutral-surface-lowest: rgb(0 0 0);
    --color-positive-default: rgb(78 188 98);
    --color-positive-onDefault: rgb(239 250 239);
    --color-positive-outline: rgb(45 90 43);
    --color-positive-surface: rgb(15 29 16);
    --color-states-focus: var(--color-info-default);
    --color-states-loading-gradient-0: rgb(255 255 255 / 0);
    --color-states-loading-gradient-100: rgb(255 255 255 / 0);
    --color-states-loading-gradient-50: rgb(255 255 255 / 0.3);
    --color-warning-default: rgb(246 179 66);
    --color-warning-onDefault: rgb(255 251 245);
    --color-warning-outline: rgb(113 43 10);
    --color-warning-surface: rgb(27 10 2);
    /* number */
    --radius-comp-button-lg: var(--radius-xs);
    --radius-comp-button-md: var(--radius-xs);
    --radius-comp-button-sm: var(--radius-xs);
    --radius-comp-button-xs: var(--radius-xs);
    --radius-comp-button-lg-focus: var(--radius-sm);
    --radius-comp-button-md-focus: var(--radius-sm);
    --radius-comp-button-sm-focus: var(--radius-sm);
    --radius-comp-button-xs-focus: var(--radius-sm);
    --radius-comp-card-default: var(--radius-3xl);
    --radius-comp-input-default: var(--radius-xs);
    --radius-comp-nav-menu-card: var(--radius-3xl);
    --radius-comp-nav-menu-list-item: var(--radius-3xl);
    --radius-comp-nav-menu-list-item-button: var(--radius-full);
    --radius-comp-tab-bar: var(--radius-full);
    --radius-comp-tab-default: var(--radius-full);
    --radius-comp-tab-focus: var(--radius-full);
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 14px;
    --radius-3xl: 16px;
    --radius-4xl: 18px;
    --radius-5xl: 24px;
    --radius-full: 1000px;
    --typography-font-weight-default-regural: 400;
    --typography-font-weight-default-semi-bold: 600;
    --typography-font-weight-display: 700;
    --typography-letter-spacing-display: -1px;
    --typography-letter-spacing-default: 0px;
    /* string */
    --components-atoms-logo: 21;
    --components-molecules-promo-banner: 2;
    --components-molecules-game-tile: 4;
    --components-organisms-faq-section: 2;
    --components-organisms-game-providers-section: 2;
    --components-organisms-hero-section: 2;
    --components-organisms-leaderboards-section: 2;
    --components-organisms-recent-big-wins-section: 2;
    --components-organisms-themes-section: 2;
    --components-organisms-races-section: 3;
    --components-organisms-games-section: 5;
    --typography-font-family-default: var(--font-zalando-sans);
    --typography-font-family-display: var(--font-pp-monument);
  }
}
