:root{
        
    --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_1: var(--spacing-x1);
    --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_xlarge: var(--spacing-x400);
    --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-x0);
    --corner-small: var(--spacing-x0);
    --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-x0);
    --corner-button-small: var(--spacing-x0);
    --corner-button-large: var(--spacing-x0);

    --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);

    --color-_base-brand-5per: #FE91100C;
    --color-_base-body: #424242;
    --color-badge-bg: var(--error);
    --color-badge-txt: var(--on-error);
    --color-badge-dark-bg: var(--error-container);
    --color-badge-dark-txt: var(--on-error-container);
    --color-body-txt: var(--on-surface);
    --color-body-thin-txt: var(--on-surface-variant);
    --color-body-accent-txt: var(--primary);
    --color-button-default-bg: var(--surface-container-high);
    --color-button-default-txt: var(--on-surface);
    --color-card-bg: var(--surface-container-high);
    --color-button-inverse-bg: var(--inverse);
    --color-button-inverse-txt: var(--on-inverse);
    --color-button-neutral-bg: var(--surface-container-high);
    --color-button-neutral-txt: var(--on-surface-variant);
    --color-card-txt: var(--on-surface);
    --color-button-brand-bg: var(--primary-container);
    --color-card-thin-txt: var(--on-surface-variant);
    --color-cover-txt: #FFFFFF;
    --color-button-brand-txt: var(--on-primary-container);
    --color-fab-bg: var(--primary);
    --color-fab-txt: var(--on-primary);
    --color-favorite-bg: var(--tertiary);
    --color-guage-bg: var(--surface);
    --color-guage-txt: var(--primary);
    --color-info-bg: var(--surface-container);
    --color-info-txt: var(--on-surface-variant);
    --color-info-title-txt: var(--on-surface);
    --color-list-head-bg: var(--surface-container-high);
    --color-list-head-txt: var(--on-surface);
    --color-list-head-suffix: var(--on-surface);
    --color-list-article-bg: var(--surface-container-high);
    --color-list-article-txt: var(--on-surface-variant);
    --color-list-article-em-txt: var(--primary);
    --color-list-article-thin-txt: var(--on-surface-variant);
    --color-lnb-bg: var(--surface-container);
    --color-lnb-index-bg: var(--surface-container);
    --color-lnb-txt: var(--on-surface-variant);
    --color-lnb-selected-bg: var(--on-surface);
    --color-lnb-selected-txt: var(--on-surface);
    --color-lnb-side-txt: var(--on-surface);
    --color-lnb-side-selected-bg: var(--primary-container);
    --color-lnb-side-selected-txt: var(--on-primary-container);
    --color-lnb-side-indent-bg: var(--surface-container-high);
    --color-lnb-side-indent-txt: var(--on-surface-variant);
    --color-lnb-side-indent-selected-txt: var(--primary);
    --color-minigame-blue: #00A2FF;
    --color-modal-outside: #0000007F;
    --color-modal-bg: var(--surface-container-high);
    --color-minigame-red: #E84C4C;
    --color-minigame-green: #559F44;
    --color-minigame-yellow: #E8B34C;
    --color-minigame-black: #000000;
    --color-minigame-bg: #0D1122;
    --color-minigame-txt: #FFFFFF;
    --color-minigame-neutral-bg: #262939;
    --color-minigame-neutral-thin-txt: #7C82A0;
    --color-noti-read-bg: var(--surface-container);
    --color-noti-read-not-bg: var(--surface-container-high);
    --color-noti-read-not-txt: var(--on-surface);
    --color-minigame-neutral-txt: #FFFFFF;
    --color-minigame-default-bg: #3E4C6F;
    --color-minigame-default-txt: #FFFFFF;
    --color-minigame-default-em-txt: #FFDE00;
    --color-minigame-accent-bg: #FFC700;
    --color-minigame-accent-txt: #2D2D2D;
    --color-minigame-accent-em-txt: #E84C4C;
    --color-pair-accent-bg: var(--primary-container);
    --color-pair-accent-inv-bg: var(--inverse-primary);
    --color-pair-accent-txt: var(--on-primary-container);
    --color-pair-second-bg: var(--secondary);
    --color-pair-second-txt: var(--on-secondary);
    --color-pair-default-bg: var(--surface-container-high);
    --color-pair-default-txt: var(--on-surface-variant);
    --color-pair-default-thin-txt: var(--on-surface-variant);
    --color-pair-default-em-txt: var(--primary);
    --color-pair-default-prominent-txt: #FF0000;
    --color-pair-neutral-txt: var(--on-surface-variant);
    --color-pair-inverse-bg: var(--inverse);
    --color-pair-inverse-txt: var(--on-inverse);
    --color-slip-bg: var(--surface-container);
    --color-slip-fold-btn-bg: var(--surface-container-high);
    --color-slip-fold-btn-txt: var(--on-surface-variant);
    --color-slip-fold-bg: var(--surface-container-highest);
    --color-slip-fold-txt: var(--on-surface);
    --color-slip-fold-thin-txt: var(--on-surface-variant);
    --color-slip-spot-bg: var(--secondary);
    --color-slip-spot-txt: var(--on-secondary);
    --color-slip-spot-bar: var(--surface-container-highest);
    --color-slip-up: #00FFB6;
    --color-slip-down: #E70B6C;
    --color-sports-bg: var(--surface-container);
    --color-sports-title-bg: var(--surface-container-highest);
    --color-sports-sunken-bg: var(--surface-container);
    --color-sports-txt: var(--on-surface);
    --color-sports-score-bg: var(--surface-container-low);
    --color-sports-score-txt: var(--on-surface);
    --color-sports-item-bg: var(--surface-container-high);
    --color-sports-betgroup-bg: var(--surface-container-highest);
    --color-sports-label-txt: var(--on-surface-variant);
    --color-sports-value-txt: var(--on-surface);
    --color-sports-base-txt: var(--tertiary);
    --color-sports-selected-border: var(--primary);
    --color-sports-selected-item-bg: var(--color-_base-brand-5per);
    --color-sports-selected-label-txt: #282828;
    --color-sports-selected-value-txt: #282828;
    --color-sports-group-bg: var(--surface-container-highest);
    --color-sports-group-txt: var(--on-surface);
    --color-sports-group-thin-txt: var(--on-surface-variant);
    --color-tab-group-bg: var(--surface-container-highest);
    --color-tab-group-border: var(--surface-container-highest);
    --color-tab-item-bg: var(--surface-container-high);
    --color-tab-item-txt: var(--on-surface-variant);
    --color-tab-item-border: var(--surface-container-high);
    --color-tab-selected-bg: var(--primary-container);
    --color-tab-selected-txt: var(--on-primary-container);
    --color-tab-selected-border: var(--primary-container);
    --color-table-th-bg: var(--surface-container);
    --color-table-th-txt: var(--on-surface-variant);
    --color-table-td-bg: var(--surface-container);
    --color-table-td-txt: var(--on-surface);
    --color-textbar-bg: var(--surface-container);
    --color-textbar-txt: var(--on-surface-variant);
    --color-textfield-placeholder-txt: var(--on-surface-variant);
    --color-textfield-ico: var(--on-surface-variant);
    --color-textfield-txt: var(--on-surface);
    --color-textfield-bg: var(--surface-container-high);
    --color-textfield-border: var(--outline);
    --color-textfield-focused-bg: var(--surface-container-high);
    --color-textfield-focused-stroke: var(--primary);
    --color-textfield-error-bg: var(--surface-container-high);
    --color-textfield-error-border: var(--error);
    --color-textfield-disabled-cover: #0000004C;
    --color-textbar-label-txt: var(--on-surface-variant);
    --color-textfield-placeholder-bg: #FF0000;
    --color-textfield-helper-bg: var(--surface);
    --color-textfield-label-bg: #FF0000;
    --color-textfield-label-txt: var(--on-surface-variant);
    --color-textbar-title-txt: var(--on-surface);
    --color-textfield-required-ico: #FFFFFF;
    --color-logo: var(--primary);
    --color-txt: var(--on-surface);
    --color-ico: var(--on-surface);
    --color-thin-txt: var(--on-surface-variant);
    --color-em-txt: var(--primary);
    --color-body-bg: var(--surface-container-high);
    --color-textbar-value-txt: var(--primary);
    --color-nav-bg: var(--surface-container);
    --color-header-bg: var(--surface-container-high);
    --color-header-txt: var(--on-surface);
    --color-contents-bg: var(--surface);
    --color-header-divider: var(--primary);
    --color-block: var(--surface-container-lowest);
    --color-live-ico: #FF0000;
    --color-live-selected-ico: #FFFFFF;
    --color-sunken-bg: var(--surface-container);
    --color-divider: #FFFFFF33;
        
      }
      :root[color-theme="light"] {
        --surface-dim: #121a24;
  --surface: #121a24;
  --surface-80per: #ff0000cc;
  --surface-bright: #ff0000;
  --on-surface: #e9ebec;
  --on-surface-variant: #9399a1;
    --surface-container-lowest: #2B3F56;
    --surface-container-low: #233447;
    --surface-container: #1C2938;
    --surface-container-high: #121A24;
    --surface-container-highest: #0C1219;
  --outline: #9399a1;
  --outline-variant: #283747;
  --inverse: #ffffff;
  --on-inverse: #0a1623;
  --inverse-container: #ffffff;
  --on-inverse-container: #0a1623;
  --inverse-primary: #ff0000;
  --primary: #04e632;
  --on-primary: #000000;
  --primary-container: #03b828;
  --on-primary-container: #000000;
  --primary-30per: #04e6324c;
  --secondary: #ff9c00;
  --on-secondary: #000000;
  --secondary-container: #ff9c00;
  --on-secondary-container: #000000;
  --secondary-30per: #ff9c004c;
  --tertiary: #ffdf1a;
  --on-tertiary: #000000;
  --tertiary-container: #ffdf1a;
  --on-tertiary-container: #000000;
  --tertiary-30per: #ffdf1a4c;
  --error: #ff5757;
  --on-error: #ffffff;
  --error-container: #cc0000;
  --on-error-container: #ffffff;
  --up: #82df1f;
  --down: #ff504d;
  --body: #ff0000;
  --bg_blur: #1c293899;
  --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: #121a24;
  --surface: #121a24;
  --surface-80per: #ff0000cc;
  --surface-bright: #ff0000;
  --on-surface: #e9ebec;
  --on-surface-variant: #9399a1;
    --surface-container-lowest: #2B3F56;
    --surface-container-low: #233447;
    --surface-container: #1C2938;
    --surface-container-high: #121A24;
    --surface-container-highest: #0C1219;
  --outline: #9399a1;
  --outline-variant: #283747;
  --inverse: #ffffff;
  --on-inverse: #0a1623;
  --inverse-container: #ffffff;
  --on-inverse-container: #0a1623;
  --inverse-primary: #ff0000;
  --primary: #04e632;
  --on-primary: #000000;
  --primary-container: #03b828;
  --on-primary-container: #000000;
  --primary-30per: #04e6324c;
  --secondary: #ff9c00;
  --on-secondary: #000000;
  --secondary-container: #ff9c00;
  --on-secondary-container: #000000;
  --secondary-30per: #ff9c004c;
  --tertiary: #ffdf1a;
  --on-tertiary: #000000;
  --tertiary-container: #ffdf1a;
  --on-tertiary-container: #000000;
  --tertiary-30per: #ffdf1a4c;
  --error: #ff5757;
  --on-error: #ffffff;
  --error-container: #cc0000;
  --on-error-container: #ffffff;
  --up: #82df1f;
  --down: #ff504d;
  --body: #ff0000;
  --bg_blur: #1c293899;
  --bg_disable: #000000b2;
  --white: #ffffff;
  --white_80p: #ffffffcc;
  --minigame-blue: #00a2ff;
  --minigame-red: #e84c4c;
  --minigame-green: #559f44;
  --minigame-yellow: #e8b34c;
  --minigame-black: #000000;
      }