:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
  
    /* Background Colors */
    /* --color-bg-01: #131F26; */
    /* --color-bg-02: #0F181D; */
    /* --color-bg-03: #222D34; */
    --color-bg-01: #000000;
    --color-bg-02: #0F0F0F;
    --color-bg-03: #222D34;
    
    /* Primary Colors */
    --color-primary-100: #2DB44A;
    --color-primary-80: #186228;
    --color-primary-60: #53b967;
    --color-primary-40: #74ca7c;
    --color-primary-20: #96d990;

    --color-primary-text: #0F181D;
    --color-primary-text-pressed: #0F181D;
    --color-primary-text-disabled: #0F181D;
    --color-primary-text-active: #0F181D;
    --color-primary-text-focus: #0F181D;
    --color-secondary-text: #2DB44A;
    --color-secondary-text-pressed: #2DB44A;
    --color-secondary-text-disabled: #777777;
    --color-secondary-text-active: #2DB44A;
    --color-secondary-text-focus: #2DB44A;
    --color-tertiary-text: #ffffff  ;
    --color-tertiary-text-pressed: #000000;
    --color-tertiary-text-disabled: #777777;
    --color-tertiary-text-active: #ffffff;
    --color-tertiary-text-focus: #ffffff;

    --color-text-white: #fff;
    --color-text-black: #000;
    --color-disabled: #777777;
  
    /* Accent Colors */
    --color-accent-100: #2DB44A;
    --color-accent-80: #186228;
    --color-accent-60: #53b967;
    --color-accent-40: #74ca7c;
    --color-accent-20: #96d990;
  
    /* Gradients */
    --gradient-primary: linear-gradient(90deg, #3BA60A 0%, #D7F205 100%);
    --gradient-primary-inverse: linear-gradient(90deg, #D7F205 0%, #3BA60A 100%);
    --gradient-black-to-transparent: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%);
  
    /* General Pure Colors */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-alert: #d43f3a;
  
    /* Neutral Colors */
    --color-neutral-90: #2C2C2C;
    --color-neutral-80: #434343;
    --color-neutral-70: #676767;
    --color-neutral-60: #929292;
    --color-neutral-50: #ADADAC;
    --color-neutral-40: #CFCFCF;
    --color-neutral-30: #E6E6E6;
    --color-neutral-20: #F2F2F2;
    --color-neutral-10: #F6F6F6;

    --color-bg-doppia: #A45DFF;
    --color-bg-tripla: #59C446;
    --color-bg-quadrupla: #1990FF;
    --color-bg-quintupla: #FF5E5E;
    --color-bg-10pla: #FFD900;
    --color-bg-altro: #FF8A00;
  
    /* Semantic Colors */
    --color-success: #05B540;
    --color-bg-success: #E4F2E9;
    --color-warning: #FF8400;
    --color-bg-warning: #FFEBD5;
    --color-error: #DF0000;
    --color-bg-error: #F2E4E4;
  
    /* Protection */
    --color-bg-dark: #434343;
  
    /* Action Colors */
    --color-primary-enabled: #32a852;
    --color-primary-pressed: var(--color-primary-100);
    --color-accent-enabled: #ff3b3b;
    --color-accent-pressed: #ff7373;
    --color-action-disabled: #ADADAC;

    /* Alert*/
    --bg-alert-success: #E4F2E9;
    --color-alert-success: #05B540;
    --bg-alert-danger: #F2E4E4;
    --color-alert-danger: #DF0000;
    --bg-alert-warning: #FFEBD5;
    --color-alert-warning: #FF8400;

    /* Betting */
    --bl-ticket-pending-event: #D2D802;
    --bl-ticket-lost-event: #C23609;
    --bl-ticket-won-event: #0ABE11;
    --bl-ticket-void-event: #4040FF;
    --bl-ticket-hwon-event-gradient: -webkit-linear-gradient(300deg, #0abf11 0%, #0280ce 75%);
    --bl-ticket-hlost-event-gradient: -webkit-linear-gradient(300deg, #c23609 0%, #0280ce 75%);

    /*Typography*/
    --heading-font-family: 'DM Sans', sans-serif;
    --body-font-family: 'DM Sans', sans-serif;
    --font-awesome: 'Font Awesome 5 Free';

    /*Line Height*/
    --heading-line-height: 1.2;
    --body-line-height: 1.5;

     /* Font Weights */
    --font-weight-bold: 700;
    --font-weight-medium: 600;
    --font-weight-regular: 400;
    --font-weight-uppercase-bold: 700;
    
    /* Font Sizes */
    --font-size-3xl: 48px;
    --font-size-2xl: 36px;
    --font-size-xl: 24px;
    --font-size-lg: 18px;
    --font-size-base: 16px;
    --font-size-md: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;
    --font-size-2xs: 10px;
    --font-size-3xs: 8px;

    /* Container */
    --container-width: 1380px;
    --container-width-xs: 650px;
    --container-padding: 15px;

    /* Margin and spacing */
    --spacing-xs: 6px;
    --spacing-sm: 10px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-viewport: 4vw;
    --margin-xs: var(--spacing-xs);
    --margin-sm: var(--spacing-sm);
    --margin-md: var(--spacing-md);
    --margin-lg: var(--spacing-lg);
    --margin-xl: var(--spacing-xl);
    --padding-xs: var(--spacing-xs);
    --padding-sm: var(--spacing-sm);
    --padding-md: var(--spacing-md);
    --padding-lg: var(--spacing-lg);
    --padding-xl: var(--spacing-xl);

    /* Border Radius */
    --border-radius-xs: 4px;
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 20px;
    --border-radius-round: 80px;

    /* Z-index */
    --z-index-dropdown: 100;
    --z-index-modal: 200;
    --z-index-overlay: 999;

    /*Icon Size*/
    --icon-size-sm: 16px;
    --icon-size-md: 24px;
    --icon-size-lg: 32px;

    /*Height*/
    --header-height: 100px;
    --footer-height: 80px;
    --button-height: 40px;
    --input-height: 50px;

    /*Transitions*/
    --transition-duration: 0.3s;
    --transition-easing: ease-in-out;

    /*Opacity*/
    --opacity-disabled: 0.5;

    /*Box Shadow*/
    --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --box-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);

    /*Translate*/
    --translate-x-50: -50%;
    --translate-y-50: -50%;

    /*Media Queries*/
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    /* Layout */
    --layout-color-bg: var(--color-bg-02);
    --layout-color-text: var(--color-secondary-text);
    
    /* Buttons */
    --button-color-bg: var(--color-primary-enabled);
    --button-color-text: var(--color-primary-text);
    --button-color-pressed-bg: var(--color-primary-pressed);
    --button-color-pressed-text: var(--color-primary-text-pressed);
    --button-color-border: var(--color-primary-100);
    --button-color-border-pressed: var(--color-primary-60);
    --button-color-secondary-bg: var(--color-bg-03);
    --button-color-secondary-text: var(--color-tertiary-text);
    --button-color-secondary-pressed-bg: var(--color-primary-pressed);
    --button-color-secondary-pressed-text: var(--color-secondary-text-pressed);
    --button-color-secondary-border: var(--color-primary-100);
    --button-color-secondary-border-pressed: var(--color-primary-60);
    --button-color-tertiary-bg: var(--color-primary-100);
    --button-color-tertiary-text: var(--color-tertiary-text);
    --button-color-tertiary-pressed-bg: var(--color-primary-pressed);
    --button-color-tertiary-pressed-text: var(--color-tertiary-text-pressed);
    --button-color-tertiary-border: var(--color-primary-100);
    --button-color-tertiary-border-pressed: var(--color-primary-60);
    --button-color-border-alert: var(--color-alert);

    /* Modal */
    --modal-bg: var(--color-bg-02);
    --modal-bg-02: var(--color-white);
    --modal-text: var(--color-primary-text);
    --modal-placeholder: var(--color-primary-text);

    /* Main Menu */
    --main-menu-color-bg: var(--color-bg-01);
    --main-menu-color-text: var(--color-secondary-text);
    --main-menu-color-secondary-text: var(--color-tertiary-text);
    --main-menu-color-border: var(--color-primary-100);

    /* TabBar */
    --tabbar-color-bg: var(--color-bg-01);
    --tabbar-color-text: var(--color-tertiary-text);
    --tabbar-color-border: var(--color-primary-100);
    --tabbar-color-pressed-bg: var(--color-primary-pressed);
    --tabbar-color-pressed-text: var(--color-primary-text-pressed);
    --tabbar-color-active-bg: var(--color-primary-100);
    --tabbar-color-active-text: var(--color-primary-text);

    /* Input */
    --input-color-bg: var(--color-neutral-80);
    --input-color-text: var(--color-tertiary-text);
    --input-color-pressed-bg: var(--color-neutral-80);
    --input-color-pressed-text: var(--color-primary-text-pressed);
    --input-color-border-hover: var(--color-primary-100);

    /* Coupon */
    --coupon-color-bg: var(--color-bg-02);
    --coupon-color-text: var(--color-secondary-text);
    --coupon-color-pressed-bg: var(--color-primary-pressed);
    --coupon-color-pressed-text: var(--color-primary-text-pressed);

    /* Table */
    --table-color-bg: var(--color-bg-02);
    --table-color-text: var(--color-tertiary-text);
    --table-color-pressed-bg: var(--color-primary-pressed);
    --table-color-pressed-text: var(--color-primary-text-pressed);
    --table-color-border: var(--color-primary-100);
    --table-color-border-pressed: var(--color-primary-60);
    --table-color-live-statistics: var(--color-primary-100);

    /* Quote */
    --quote-color-bg: var(--color-bg-02);
    --quote-color-bg-pressed: var(--color-primary-pressed);
    --quote-color-bg-top: var(--color-accent-100);
    --quote-color-text: var(--color-tertiary-text);
    --quote-color-pressed-bg: var(--color-primary-100);
    --quote-color-pressed-text: var(--color-tertiary-text-pressed);
    --quote-color-border: var(--color-primary-100);
    --quote-color-border-pressed: var(--color-primary-60);
    --quote-color-live-statistics: var(--color-primary-100);

    /* Betslip */
    --betslip-color-bg: var(--color-bg-03);
    --betslip-color-text: var(--color-tertiary-text);
    --betslip-color-pressed-bg: var(--color-primary-pressed);
    --betslip-color-pressed-text: var(--color-primary-text-pressed);
    --betslip-color-border: var(--color-primary-100);
    --betslip-color-border-pressed: var(--color-primary-60);
    --betslip-color-match-bg: var(--color-bg-02);
    --betslip-color-match-text: var(--color-tertiary-text);

    /* Hamburger Menu */
    --hamburger-color-bg: var(--color-bg-01);
    --hamburger-color-text: var(--color-tertiary-text);
    --hamburger-color-border: var(--color-primary-100);
    --hamburger-color-pressed-bg: var(--color-primary-pressed);
    --hamburger-color-pressed-text: var(--color-primary-text-pressed);
    --hamburger-color-active-bg: var(--color-primary-100);
    --hamburger-color-active-text: var(--color-primary-text);
    --hamburger-color-disabled-bg: var(--color-primary-100);
    --hamburger-color-disabled-text: var(--color-primary-text);

    /* Live Page */
    --live-color-bg: var(--color-bg-03);
    --live-color-text: var(--color-tertiary-text);
    --live-color-border: var(--color-primary-100);
    --live-color-pressed-bg: var(--color-primary-pressed);
    --live-color-pressed-text: var(--color-primary-text-pressed);
    --live-color-active-bg: var(--color-primary-100);
    --live-color-active-text: var(--color-primary-text);
    --live-color-disabled-bg: var(--color-primary-100);
    --live-color-disabled-text: var(--color-primary-text);
    /* --live-table-color-bg: var(--color-bg-02); */
    --live-table-color-bg: #000000;
    --live-table-color-text: var(--color-tertiary-text);
    --live-table-color-border: var(--color-primary-100);
    --live-table-color-pressed-bg: var(--color-primary-pressed);
    --live-table-color-pressed-text: var(--color-primary-text-pressed);
    --live-table-color-active-bg: var(--color-primary-100);
    --live-table-color-active-text: var(--color-primary-text);
    --live-table-color-disabled-bg: var(--color-primary-100);
    --live-table-color-disabled-text: var(--color-primary-text);
    --live-table-color-quote: var(--color-accent-100);


    /* Drop Down */
    --drop-down-color-bg: var(--color-bg-02);
    --drop-down-color-text: var(--color-tertiary-text);
    --drop-down-color-border: var(--color-primary-100);
    --drop-down-color-pressed-bg: var(--color-primary-pressed);
    --drop-down-color-pressed-text: var(--color-primary-text-pressed);
    --drop-down-color-active-bg: var(--color-primary-100);
    --drop-down-color-active-text: var(--color-primary-text);
    --drop-down-color-disabled-bg: var(--color-primary-100);
    --drop-down-color-disabled-text: var(--color-primary-text);

    /* Casino */
    --casino-color-bg: var(--color-bg-02);
    --casino-color-text: var(--color-tertiary-text);
    --casino-color-border: var(--color-primary-100);
    --casino-color-pressed-bg: var(--color-primary-pressed);
    --casino-color-pressed-text: var(--color-primary-text-pressed);
    --casino-color-active-bg: var(--color-primary-100);
    --casino-color-active-text: var(--color-primary-text);
    --casino-color-disabled-bg: var(--color-primary-100);
    --casino-color-disabled-text: var(--color-primary-text);
    --casino-button-color-bg: var(--color-bg-02);
    --casino-button-color-text: var(--color-tertiary-text);
    --casino-button-color-active-bg: var(--color-primary-100);
    --casino-button-color-active-text: var(--color-tertiary-text);
    --casino-button-color-disabled-bg: var(--color-disabled);
    --casino-button-color-disabled-text: var(--color-disabled);
  }