:root {
  --semantic-text-primary: #e5e5e5;
  --semantic-text-secondary: #848484;
  --semantic-text-primary-contrast: #000000;
  --semantic-text-secondary-contrast: #000000bf;
  --brand-orange: #f59500;
  --brand-black: #000000;
  --brand-yellow-light: #f5c314;
  --brand-orange-dark: #f56912;
  --brand-red: #f52813;
  --brand-white: #ffffff;
  --semantic-button-primary-background: #f59500;
  --semantic-button-secondary-background: #312200;
  --brand-brown: #312200;
  --semantic-background-surface-4: #1a1a1a;
  --semantic-border-primary: #f59500;
  --semantic-border-secondary: #1a1a1a;
  --semantic-game-en-vivo-base: #ff1c38;
  --semantic-game-en-vivo-hover: #861423;
  --semantic-game-en-vivo-selected: #ff243f;
  --semantic-game-bonus-base: #4cad00;
  --semantic-game-bonus-hover: #2d5d07;
  --semantic-game-bonus-selected: #51b800;
  --semantic-game-hot-base: #f56912;
  --semantic-game-hot-hover: #813b10;
  --semantic-game-hot-selected: #f67423;
  --semantic-game-nuevo-base: #812dcd;
  --semantic-game-nuevo-hover: #471d6d;
  --semantic-game-nuevo-selected: #8936d3;
  --semantic-game-ruletas-hover: #6e2d50;
  --semantic-game-ruletas-selected: #d05397;
  --semantic-game-ruletas-base: #ce4d93;
  --semantic-game-poker-base: #f5c314;
  --semantic-game-poker-hover: #7c600b;
  --semantic-game-poker-selected: #f5bf01;
  --semantic-game-blackjack-base: #487799;
  --semantic-game-blackjack-hover: #2b4253;
  --semantic-game-blackjack-selected: #4d7fa3;
  --semantic-game-baccarat-base: #4250ce;
  --semantic-game-baccarat-hover: #282f6e;
  --semantic-game-baccarat-selected: #4856cf;
  --primitives-red-base: #ff1c38;
  --primitives-red-dark: #861423;
  --primitives-red-light: #ff243f;
  --primitives-green-base: #4cad00;
  --primitives-green-dark: #2d5d07;
  --primitives-green-light: #51b800;
  --primitives-orange-base: #f56912;
  --primitives-orange-dark: #813b10;
  --primitives-orange-light: #f67423;
  --primitives-purple-base: #812dcd;
  --primitives-purple-dark: #471d6d;
  --primitives-purple-light: #8936d3;
  --primitives-pink-base: #ce4d93;
  --primitives-pink-dark: #6e2d50;
  --primitives-pink-light: #d05397;
  --primitives-yellow-base: #f5c314;
  --primitives-yellow-dark: #7c600b;
  --primitives-yellow-light: #f5bf01;
  --primitives-teal-base: #487799;
  --primitives-teal-dark: #2b4253;
  --primitives-teal-light: #4d7fa3;
  --primitives-blue-base: #4250ce;
  --primitives-blue-dark: #282f6e;
  --primitives-blue-light: #4856cf;
  --primitives-emerald-base: #3eb495;
  --primitives-emerald-dark: #256151;
  --primitives-emerald-light: #40b999;
  --semantic-game-show-base: #3eb495;
  --semantic-game-show-hover: #256151;
  --semantic-game-show-selected: #40b999;
  --semantic-background-surface1: #000000;
  --semantic-background-surface2: #080808;
  --semantic-background-surface3: #0d0d0d;
  --semantic-background-surface4: #1a1a1a;
  --semantic-background-highlight: #2b2b2b;
  --semantic-button-destructive-background: #861423;
  --semantic-button-destructive-foreground: #ff243f;
  --semantic-button-primary-foreground: #000000;
  --semantic-button-secondary-foreground: #f59500;
  --semantic-text-hyperlink: #f59500;
  --semantic-game-favorite-base: #f59500;
  --semantic-game-favorite-hover: #815107;
  --semantic-game-favorite-selected: #ff9f0a;
  --primitives-orange-soft-base: #f59500;
  --primitives-orange-soft-dark: #815107;
  --primitives-orange-soft-light: #ff9f0a;
}

/**
 * COLORS CLASSES UTILITIES
 */
/* Text Colors */
.text-primary {
  color: var(--semantic-text-primary);
}
.text-secondary {
  color: var(--semantic-text-secondary);
}
.text-primary-contrast {
  color: var(--semantic-text-primary-contrast);
}
.text-secondary-contrast {
  color: var(--semantic-text-secondary-contrast);
}
.text-hyperlink {
  color: var(--semantic-text-hyperlink);
}

/* Border Colors */
.border-primary {
  border: 1px solid var(--semantic-border-primary);
}
.border-secondary {
  border: 1px solid var(--semantic-border-secondary);
}
.border-block-secondary {
  border-block: 1px solid var(--semantic-border-secondary);
}
.bottom-border-secondary {
  border-bottom: 1px solid var(--semantic-border-secondary);
}
.bottom-border-brand-orange {
  border-bottom: 1px solid var(--brand-orange);
}
.bottom-border-primary-background {
  border-bottom: 1px solid var(--semantic-button-primary-background);
}

/* Button Backgrounds */
.bg-button-primary {
  background-color: var(--semantic-button-primary-background);
}
.bg-button-secondary {
  background-color: var(--semantic-button-secondary-background);
}
.bg-button-destructive {
  background-color: var(--semantic-button-destructive-background);
}

/* Button Foregrounds */
.text-button-primary {
  color: var(--semantic-button-primary-foreground);
}
.text-button-secondary {
  color: var(--semantic-button-secondary-foreground);
}
.text-button-destructive {
  color: var(--semantic-button-destructive-foreground);
}

/* Brand Backgrounds */
.bg-orange {
  background-color: var(--brand-orange);
}
.bg-black {
  background-color: var(--brand-black);
}
.bg-yellow-light {
  background-color: var(--brand-yellow-light);
}
.bg-orange-dark {
  background-color: var(--brand-orange-dark);
}
.bg-red {
  background-color: var(--brand-red);
}
.bg-white {
  background-color: var(--brand-white);
}
.bg-brown {
  background-color: var(--brand-brown);
}

/* Surface Backgrounds */
.bg-surface1 {
  background-color: var(--semantic-background-surface1);
}
.bg-surface2 {
  background-color: var(--semantic-background-surface2);
}
.bg-surface3 {
  background-color: var(--semantic-background-surface3);
}
.bg-surface4 {
  background-color: var(--semantic-background-surface4);
}

/* Game Backgrounds */
.bg-game-en-vivo-base {
  background-color: var(--semantic-game-en-vivo-base);
}
.bg-game-en-vivo-hover {
  background-color: var(--semantic-game-en-vivo-hover);
}
.bg-game-en-vivo-selected {
  background-color: var(--semantic-game-en-vivo-selected);
}
.bg-game-bonus-base {
  background-color: var(--semantic-game-bonus-base);
}
.bg-game-bonus-hover {
  background-color: var(--semantic-game-bonus-hover);
}
.bg-game-bonus-selected {
  background-color: var(--semantic-game-bonus-selected);
}
.bg-game-hot-base {
  background-color: var(--semantic-game-hot-base);
}
.bg-game-hot-hover {
  background-color: var(--semantic-game-hot-hover);
}
.bg-game-hot-selected {
  background-color: var(--semantic-game-hot-selected);
}
.bg-game-nuevo-base {
  background-color: var(--semantic-game-nuevo-base);
}
.bg-game-nuevo-hover {
  background-color: var(--semantic-game-nuevo-hover);
}
.bg-game-nuevo-selected {
  background-color: var(--semantic-game-nuevo-selected);
}
.bg-game-ruletas-base {
  background-color: var(--semantic-game-ruletas-base);
}
.bg-game-ruletas-hover {
  background-color: var(--semantic-game-ruletas-hover);
}
.bg-game-ruletas-selected {
  background-color: var(--semantic-game-ruletas-selected);
}
.bg-game-poker-base {
  background-color: var(--semantic-game-poker-base);
}
.bg-game-poker-hover {
  background-color: var(--semantic-game-poker-hover);
}
.bg-game-poker-selected {
  background-color: var(--semantic-game-poker-selected);
}
.bg-game-blackjack-base {
  background-color: var(--semantic-game-blackjack-base);
}
.bg-game-blackjack-hover {
  background-color: var(--semantic-game-blackjack-hover);
}
.bg-game-blackjack-selected {
  background-color: var(--semantic-game-blackjack-selected);
}
.bg-game-baccarat-base {
  background-color: var(--semantic-game-baccarat-base);
}
.bg-game-baccarat-hover {
  background-color: var(--semantic-game-baccarat-hover);
}
.bg-game-baccarat-selected {
  background-color: var(--semantic-game-baccarat-selected);
}
.bg-game-show-base {
  background-color: var(--semantic-game-show-base);
}
.bg-game-show-hover {
  background-color: var(--semantic-game-show-hover);
}
.bg-game-show-selected {
  background-color: var(--semantic-game-show-selected);
}
.bg-game-favorite-base {
  background-color: var(--semantic-game-favorite-base);
}
.bg-game-favorite-hover {
  background-color: var(--semantic-game-favorite-hover);
}
.bg-game-favorite-selected {
  background-color: var(--semantic-game-favorite-selected);
}

/* Primitives Backgrounds */
.bg-red-base {
  background-color: var(--primitives-red-base);
}
.bg-red-dark {
  background-color: var(--primitives-red-dark);
}
.bg-red-light {
  background-color: var(--primitives-red-light);
}
.bg-green-base {
  background-color: var(--primitives-green-base);
}
.bg-green-dark {
  background-color: var(--primitives-green-dark);
}
.bg-green-light {
  background-color: var(--primitives-green-light);
}
.bg-orange-base {
  background-color: var(--primitives-orange-base);
}
.bg-primitive-orange-dark {
  background-color: var(--primitives-orange-dark);
}
.bg-orange-light {
  background-color: var(--primitives-orange-light);
}
.bg-purple-base {
  background-color: var(--primitives-purple-base);
}
.bg-purple-dark {
  background-color: var(--primitives-purple-dark);
}
.bg-purple-light {
  background-color: var(--primitives-purple-light);
}
.bg-pink-base {
  background-color: var(--primitives-pink-base);
}
.bg-pink-dark {
  background-color: var(--primitives-pink-dark);
}
.bg-pink-light {
  background-color: var(--primitives-pink-light);
}
.bg-yellow-base {
  background-color: var(--primitives-yellow-base);
}
.bg-yellow-dark {
  background-color: var(--primitives-yellow-dark);
}
.bg-yellow-light {
  background-color: var(--primitives-yellow-light);
}
.bg-teal-base {
  background-color: var(--primitives-teal-base);
}
.bg-teal-dark {
  background-color: var(--primitives-teal-dark);
}
.bg-teal-light {
  background-color: var(--primitives-teal-light);
}
.bg-blue-base {
  background-color: var(--primitives-blue-base);
}
.bg-blue-dark {
  background-color: var(--primitives-blue-dark);
}
.bg-blue-light {
  background-color: var(--primitives-blue-light);
}
.bg-emerald-base {
  background-color: var(--primitives-emerald-base);
}
.bg-emerald-dark {
  background-color: var(--primitives-emerald-dark);
}
.bg-emerald-light {
  background-color: var(--primitives-emerald-light);
}
.bg-orange-soft-base {
  background-color: var(--primitives-orange-soft-base);
}
.bg-orange-soft-dark {
  background-color: var(--primitives-orange-soft-dark);
}
.bg-orange-soft-light {
  background-color: var(--primitives-orange-soft-light);
}


/**
 * BUTTON CLASSES UTILITIES
 */

.primary-button {
  background: var(--semantic-button-primary-background);
}
.primary-button .button-text {
  color: var(--semantic-button-primary-foreground);
}
.primary-button:hover:not(:disabled) {
  background: var(--brand-orange-dark);
}

.secondary-button {
  background: var(--semantic-button-secondary-background);
  font-size: var(--sds-typeface-size-button-large);
  width: 100%;
}

.secondary-button .button-text {
  color: var(--semantic-button-secondary-foreground);
}

.secondary-button:hover:not(:disabled) {
  .button-text {
    -webkit-text-fill-color: var(--brand-orange-dark);
  }
}

.secondary-button:disabled {
  border: 1px solid var(--semantic-button-primary-background);
}