:root{
        --gnb-bg:var(--primary);
--gnb-button-text-color:var(--on-surface);

--mobile-main-menu-icon : var(--on-surface);
--mobile-main-menu-text : var(--on-surface);
--body-bg: var(--surface);
--header-bg: var(--surface);
--contents-bg: var(--surface-dim);

#--gnb-bg:var(--primary-container);
#--gnb-button-text-color:var(--on-primary-container);
#--gnb-indicator-bg:var(--on-primary-container);
--gnb-bg:var(--surface-container-lowest);
--gnb-button-text-color:var(--on-surface);
--gnb-indicator-bg:var(--primary);

#--gnb-border-top-color:transparent;
#--gnb-border-bottom-color:transparent;
--gnb-border-top-color:var(--primary);
--gnb-border-bottom-color:var(--primary);

--odds-button-bg:var(--surface-container-high);
--odds-button-border-color:transparent;
--odds-button-text-color:var(--on-surface);
--odds-button-handicap-text-color:var(--secondary);
--odds-button-over-icon-color:var(--up);
--odds-button-under-icon-color:var(--down);
--odds-button-selected-bg:var(--surface-container-high);
--odds-button-selected-border-color:var(--primary);
--odds-button-selected-text-color:var(--on-surface);
--odds-button-selected-handicap-text-color:var(--secondary);
--odds-button-selected-over-icon-color:var(--up);
--odds-button-selected-under-icon-color:var(--down);

--board-higilight-text-color:var(--primary);



--mobile-main-menu-bg: var(--surface-container-high);
--mobile-main-menu-icon : var(--on-surface);
--mobile-main-menu-text : var(--on-surface);

--mobile-main-addon-menu-bg: var(--surface-container-high);
--mobile-main-addon-menu-icon : var(--on-surface);
--mobile-main-addon-menu-text : var(--on-surface);
--mobile-main-addon-menu-border : var(--surface-container-lowest);


--size-input-text:16px;

--spacing-x0: 0;
--spacing-x1: 1px;
--spacing-standard:4px;
--spacing-x100: calc(var(--spacing-standard) * 2);
--spacing-x150: calc(var(--spacing-standard) * 3);
--spacing-x200: calc(var(--spacing-standard) * 4);
--spacing-x250: calc(var(--spacing-standard) * 5);
--spacing-x300: calc(var(--spacing-standard) * 6);
--spacing-x400: calc(var(--spacing-standard) * 8);
--spacing-x500: calc(var(--spacing-standard) * 10);
--spacing-x50: calc(var(--spacing-standard) * 1);

--spacing-gap_xlarge: var(--spacing-x400);
--spacing-gap_large: var(--spacing-x300);
--spacing-gap_medium: var(--spacing-x200);
--spacing-gap_medium_small: var(--spacing-x150);
--spacing-gap_small: var(--spacing-x100);
--spacing-gap_tiny: var(--spacing-x50);
--spacing-gap_1: var(--spacing-x1);

--spacing-cast: 100;
--spacing-tab: 100;
--spacing-pick_item: 100;
--spacing-body: 100;
--spacing-section: 100;
--spacing-textfield: 100;
--spacing-form_field: 100;
--spacing-item_gap: 100;

--corner-default: 0;
--corner-large: var(--spacing-x300);
--corner-small: var(--spacing-x100);
--corner-tab_item: var(--spacing-x500);
--corner-tab_group: var(--spacing-x500);
--corner-textfield: var(--spacing-x500);
--corner-pick_item: var(--spacing-x500);
--corner-button-medium: var(--spacing-x100);
--corner-button-small: var(--spacing-x50);
--corner-button-large: var(--spacing-x200);

--height-12pt-x100: calc(12px + var(--spacing-x100) * 2);
--height-14pt-x100: calc(14px + var(--spacing-x100) * 2);
--height-14pt-x150: calc(14px + var(--spacing-x150) * 2);
--height-14pt-x200: calc(14px + var(--spacing-x200) * 2);
--height-18pt-x100: calc(18px + var(--spacing-x100) * 2);
--height-18pt-x200:calc(18px + var(--spacing-x200) * 2);
--height-18pt-x300: calc(18px + var(--spacing-x300) * 2);

        
      }
      :root[color-theme="light"] {
       --surface-dim: #141516;
  --surface: #141516;
  --surface-80per: #ff0000cc;
  --surface-bright: #ff0000;
  --on-surface: #e9ebec;
  --on-surface-variant: #9399a1;
  --surface-container-lowest: #1a1c1e;
  --surface-container-low: #ff0000;
  --surface-container: #282b2d;
  --surface-container-high: #3a3f44;
  --surface-container-highest: #ff0000;
  --outline: #9399a1;
  --outline-variant: #282b2e;
  --inverse: #FFFFFF;
  --on-inverse: #0a1623;
  --inverse-container: #FFFFFF;
  --on-inverse-container: #0a1623;
  --inverse-primary: #ff0000;
  --primary: #006FFF;
  --on-primary: #FFFFFF;
  --primary-container: #006FFF;
  --on-primary-container: #FFFFFF;
  --primary-30per: #006FFF4c;
  --secondary: #FFFF00;
  --on-secondary: #000000;
  --secondary-container: #efef0e;
  --on-secondary-container: #000000;
  --secondary-30per: #19e5344c;
  --tertiary: #ff0000;
  --on-tertiary: #000000;
  --tertiary-container: #cc7c00;
  --on-tertiary-container: #000000;
  --tertiary-30per: #ff9c004c;
  --error: #ff5757;
  --on-error: #ffffff;
  --error-container: #cc0000;
  --on-error-container: #ffffff;
  --up: #82df1f;
  --down: #ff504d;
  --body: #ff0000;
  --bg_blur: #1b1d1f99;
  --bg_disable: #000000b2;
  --white: #ffffff;
  --white_80p: #ffffffcc;
  --minigame-blue: #00a2ff;
  --minigame-red: #e84c4c;
  --minigame-green: #559f44;
  --minigame-yellow: #e8b34c;
  --minigame-black: #000000;
          
      }
      :root[color-theme="dark"] {
       --surface-dim: #141516;
  --surface: #141516;
  --surface-80per: #ff0000cc;
  --surface-bright: #ff0000;
  --on-surface: #e9ebec;
  --on-surface-variant: #9399a1;
  --surface-container-lowest: #1a1c1e;
  --surface-container-low: #ff0000;
  --surface-container: #282b2d;
  --surface-container-high: #3a3f44;
  --surface-container-highest: #ff0000;
  --outline: #9399a1;
  --outline-variant: #282b2e;
  --inverse: #FFFFFF;
  --on-inverse: #0a1623;
  --inverse-container: #FFFFFF;
  --on-inverse-container: #0a1623;
  --inverse-primary: #ff0000;
  --primary: #006FFF;
  --on-primary: #FFFFFF;
  --primary-container: #006FFF;
  --on-primary-container: #FFFFFF;
  --primary-30per: #006FFF4c;
  --secondary: #FFFF00;
  --on-secondary: #000000;
  --secondary-container: #efef0e;
  --on-secondary-container: #000000;
  --secondary-30per: #19e5344c;
  --tertiary: #ff0000;
  --on-tertiary: #000000;
  --tertiary-container: #cc7c00;
  --on-tertiary-container: #000000;
  --tertiary-30per: #ff9c004c;
  --error: #ff5757;
  --on-error: #ffffff;
  --error-container: #cc0000;
  --on-error-container: #ffffff;
  --up: #82df1f;
  --down: #ff504d;
  --body: #ff0000;
  --bg_blur: #1b1d1f99;
  --bg_disable: #000000b2;
  --white: #ffffff;
  --white_80p: #ffffffcc;
  --minigame-blue: #00a2ff;
  --minigame-red: #e84c4c;
  --minigame-green: #559f44;
  --minigame-yellow: #e8b34c;
  --minigame-black: #000000;
      }