:root {

    --mobile-main-menu-icon: var(--on-surface);
    --mobile-main-menu-text: var(--on-surface);
    --body-bg: #fff;
    --header-bg: var(--surface);
    --contents-bg: var(--surface-dim);
    --gnb-bg: var(--surface-container-lowest);
    --gnb-button-text-color: var(--on-surface); 
    --gnb-indicator-bg: var(--primary);

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


    --main-card-banner-hover-opacity: 1;

    --odds-button-bg: var(--surface-container-high);
    --odds-button-border-color: transparent;
    --odds-button-text-color: var(--on-surface);
    --odds-button-handicap-text-color: #9000ff;
    --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-bg: #fff;
    --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-x0);
    --corner-small: var(--spacing-x0);
    --corner-tab_item: var(--spacing-x0);
    --corner-tab_group: var(--spacing-x0);
    --corner-textfield: var(--spacing-x0);
    --corner-pick_item: var(--spacing-x0);
    --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);


}
:root[color-theme="dark"] {--surface-dim: #f1f1f1;
    --surface: #fff;
    --surface-80per: #ff0000cc;
    --surface-bright: #ff0000;

    --on-surface: #000;
    --on-surface-variant: #222;

    --surface-container-lowest: #f4f6fa;
    --surface-container-low: #ff0000;
    --surface-container: #fff;
    --surface-container-high: #e3e5e8;
    --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: #005432;
    --on-primary: #fff;
    --primary-container: #005432;
    --on-primary-container: #fff;
    --primary-30per: #ff3b3b4c;

    --secondary: #1c84b6;
    --on-secondary: #000000;
    --secondary-container: #ff9900;
    --on-secondary-container: #000000;
    --secondary-30per: #00ffff4c;

    --tertiary: #008e52;
    --on-tertiary: #000000;
    --tertiary-container: #008e52;
    --on-tertiary-container: #000000;
    --tertiary-30per: #00ff944c;

    --error: var(--primary-container);
    --on-error: #fff;
    --error-container: var(--primary-container);
    --on-error-container: #fff;

    --up: #009cff;
    --down: #ff0000;
    --body: #ff0000;
    --bg_blur: #00000099;
    --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: #f1f1f1;
    --surface: #fff;
    --surface-80per: #ff0000cc;
    --surface-bright: #ff0000;

    --on-surface: #000;
    --on-surface-variant: #222;

    --surface-container-lowest: #f4f6fa;
    --surface-container-low: #ff0000;
    --surface-container: #fff;
    --surface-container-high: #e3e5e8;
    --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: #005432;
    --on-primary: #fff;
    --primary-container: #005432;
    --on-primary-container: #fff;
    --primary-30per: #ff3b3b4c;

    --secondary: #1c84b6;
    --on-secondary: #000000;
    --secondary-container: #ff9900;
    --on-secondary-container: #000000;
    --secondary-30per: #00ffff4c;

    --tertiary: #008e52;
    --on-tertiary: #000000;
    --tertiary-container: #008e52;
    --on-tertiary-container: #000000;
    --tertiary-30per: #00ff944c;

    --error: var(--primary-container);
    --on-error: #fff;
    --error-container: var(--primary-container);
    --on-error-container: #fff;

    --up: #009cff;
    --down: #ff0000;
    --body: #ff0000;
    --bg_blur: #00000099;
    --bg_disable: #000000b2;
    --white: #ffffff;
    --white_80p: #ffffffcc;
    --minigame-blue: #00a2ff;
    --minigame-red: #e84c4c;
    --minigame-green: #559f44;
    --minigame-yellow: #e8b34c;
    --minigame-black: #000000;
      }