:root{
        
    --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);


    --size-input-text:16px;

    --global-menu-font-size:18px;
    --global-menu-align:flex-start;
    --global-menu-gap:0px;
    --global-menu-indicator-color:var(--primary);

    --global-menu-bg:transparent;
    --global-menu-border-radius:0px;
    --global-menu-border-width:0px;
    --global-menu-border-color:transparent;
    --global-menu-text-color:var(--on-surface);

    --global-menu-hover-bg:transparent;
    --global-menu-hover-border-color:transparent;
    --global-menu-hover-text-color:var(--primary);

    --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: var(--spacing-x200);
    --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: #0f0e0e;
  --surface: #0f0e0e;
  --surface-80per: #ff0000cc;
  --surface-bright: #ff0000;
  --on-surface: #e9ebec;
  --on-surface-variant: #9399a1;
  --surface-container-lowest: #1f1f22;
  --surface-container-low: #ff0000;
  --surface-container: #27272b;
  --surface-container-high: #3d3d40;
  --surface-container-highest: #ff0000;
  --outline: #9399a1;
  --outline-variant: #27272b;
  --inverse: #ffffff;
  --on-inverse: #0a1623;
  --inverse-container: #ffffff;
  --on-inverse-container: #0a1623;
  --inverse-primary: #ff0000;
  --primary: #f83375;
  --on-primary: #000000;
  --primary-container: #f83375;
  --on-primary-container: #000000;
  --primary-30per: #f833754c;
  --secondary: #24b0ff;
  --on-secondary: #000000;
  --secondary-container: #24b0ff;
  --on-secondary-container: #000000;
  --secondary-30per: #24b0ff4c;
  --tertiary: #ff9c00;
  --on-tertiary: #000000;
  --tertiary-container: #ff9c00;
  --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: #1f1f2299;
  --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: #0f0e0e;
    --surface: #0f0e0e;
    --surface-80per: #ff0000cc;
    --surface-bright: #ff0000;
    --on-surface: #e9ebec;
    --on-surface-variant: #9399a1;
    --surface-container-lowest: #1f1f22;
    --surface-container-low: #ff0000;
    --surface-container: #27272b;
    --surface-container-high: #3d3d40;
    --surface-container-highest: #ff0000;
    --outline: #9399a1;
    --outline-variant: #27272b;
    --inverse: #ffffff;
    --on-inverse: #0a1623;
    --inverse-container: #ffffff;
    --on-inverse-container: #0a1623;
    --inverse-primary: #ff0000;
    --primary: #f83375;
    --on-primary: #000000;
    --primary-container: #f83375;
    --on-primary-container: #000000;
    --primary-30per: #f833754c;
    --secondary: #24b0ff;
    --on-secondary: #000000;
    --secondary-container: #24b0ff;
    --on-secondary-container: #000000;
    --secondary-30per: #24b0ff4c;
    --tertiary: #ff9c00;
    --on-tertiary: #000000;
    --tertiary-container: #ff9c00;
    --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: #1f1f2299;
    --bg_disable: #000000b2;
    --white: #ffffff;
    --white_80p: #ffffffcc;
    --minigame-blue: #00a2ff;
    --minigame-red: #e84c4c;
    --minigame-green: #559f44;
    --minigame-yellow: #e8b34c;
    --minigame-black: #000000;
}