/*
@font-face {
    font-family: "Noto Sans JP";
    src: url("../resources/NotoSansJP-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans JP";
    src: url("../resources/NotoSansJP-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans JP";
    src: url("../resources/NotoSansJP-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans JP";
    src: url("../resources/NotoSansJP-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Zen Kaku Gothic New";
    src: url("../resources/ZenKakuGothicNew-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
*/

/* Use the browser/OS default UI font instead of bundled web fonts. */
html {
    font-family: system-ui, sans-serif;
}

:root {
            --color-primary:                    #001337;
            --color-on-primary:                 #ffffff;
            --color-primary-container:          #0f2854;
            --color-on-primary-container:       #7b90c2;
            --color-primary-fixed:              #d9e2ff;
            --color-primary-fixed-dim:          #b1c6fb;
            --color-on-primary-fixed:           #001a43;
            --color-on-primary-fixed-variant:   #304673;
            --color-inverse-primary:            #b1c6fb;
            --color-secondary:                  #006495;
            --color-on-secondary:               #ffffff;
            --color-secondary-container:        #2db1ff;
            --color-on-secondary-container:     #004163;
            --color-secondary-fixed:            #cbe6ff;
            --color-secondary-fixed-dim:        #90cdff;
            --color-on-secondary-fixed:         #001e30;
            --color-on-secondary-fixed-variant: #004b71;
            --color-tertiary:                   #041528;
            --color-on-tertiary:                #ffffff;
            --color-tertiary-container:         #1a2a3e;
            --color-on-tertiary-container:      #8191aa;
            --color-tertiary-fixed:             #d3e4fe;
            --color-tertiary-fixed-dim:         #b7c8e1;
            --color-on-tertiary-fixed:          #0b1c30;
            --color-on-tertiary-fixed-variant:  #38485d;
            --color-error:                      #ba1a1a;
            --color-on-error:                   #ffffff;
            --color-error-container:            #ffdad6;
            --color-on-error-container:         #93000a;
            --color-background:                 #f8f9ff;
            --color-on-background:              #191c20;
            --color-surface:                    #f8f9ff;
            --color-on-surface:                 #191c20;
            --color-surface-variant:            #e1e2e8;
            --color-on-surface-variant:         #44474f;
            --color-surface-dim:                #d8dae0;
            --color-surface-bright:             #f8f9ff;
            --color-surface-container-lowest:   #ffffff;
            --color-surface-container-low:      #f2f3f9;
            --color-surface-container:          #eceef3;
            --color-surface-container-high:     #e7e8ee;
            --color-surface-container-highest:  #e1e2e8;
            --color-surface-tint:               #485e8d;
            --color-inverse-surface:            #2e3135;
            --color-inverse-on-surface:         #eff0f6;
            --color-outline:                    #757780;
            --color-outline-variant:            #c5c6d0;
            --color-mac-unregistered:           #9ca3af;
            --color-mac-disconnected:           #f59e0b;
            --color-mac-connected:              #22c55e;
            --color-calendar-holiday:           #f97316;
            --color-calendar-sunday:            #ef4444;
            --color-calendar-saturday:          #3b82f6;
            --color-log-warning-container:      #fff7d6;
            --color-on-log-warning-container:   #5f4600;
            --color-log-fatal-container:        #f0dbff;
            --color-on-log-fatal-container:     #4b166d;
            --color-brand-red:                  #c62828;
            --color-brand-orange:               #ef6c00;
            --color-brand-yellow:               #f9a825;
            --color-brand-green:                #2e7d32;
            --color-brand-blue:                 #1565c0;
            --color-brand-hal:                  #0052a5;
            --color-brand-indigo:               #3949ab;
            --color-brand-purple:               #6a1b9a;
            --color-brand-red-light:            #f44336;
            --color-brand-orange-light:         #ff9800;
            --color-brand-yellow-light:         #ffeb3b;
            --color-brand-green-light:          #4caf50;
            --color-brand-blue-light:           #2196f3;
            --color-brand-indigo-light:         #7986cb;
            --color-brand-purple-light:         #9c27b0;
            --color-brand-red-dark:             #4e0000;
            --color-brand-orange-dark:          #7c2400;
            --color-brand-yellow-dark:          #9e6400;
            --color-brand-green-dark:           #0a3d0e;
            --color-brand-blue-dark:            #06296b;
            --color-brand-indigo-dark:          #0f1554;
            --color-brand-purple-dark:          #2d0047;
            --color-brand-red-soft:             #ffcdd2;
            --color-brand-orange-soft:          #ffe0b2;
            --color-brand-yellow-soft:          #fff9c4;
            --color-brand-green-soft:           #c8e6c9;
            --color-brand-blue-soft:            #bbdefb;
            --color-brand-indigo-soft:          #c5cae9;
            --color-brand-purple-soft:          #e1bee7;
        }
        .dark {
            --color-primary:                    #b1c6fb;
            --color-on-primary:                 #002d6b;
            --color-primary-container:          #304673;
            --color-on-primary-container:       #d9e2ff;
            --color-primary-fixed:              #d9e2ff;
            --color-primary-fixed-dim:          #b1c6fb;
            --color-on-primary-fixed:           #001a43;
            --color-on-primary-fixed-variant:   #304673;
            --color-inverse-primary:            #485e8d;
            --color-secondary:                  #90cdff;
            --color-on-secondary:               #003351;
            --color-secondary-container:        #004b71;
            --color-on-secondary-container:     #cbe6ff;
            --color-secondary-fixed:            #cbe6ff;
            --color-secondary-fixed-dim:        #90cdff;
            --color-on-secondary-fixed:         #001e30;
            --color-on-secondary-fixed-variant: #004b71;
            --color-tertiary:                   #b7c8e1;
            --color-on-tertiary:                #22334a;
            --color-tertiary-container:         #38485d;
            --color-on-tertiary-container:      #d3e4fe;
            --color-tertiary-fixed:             #d3e4fe;
            --color-tertiary-fixed-dim:         #b7c8e1;
            --color-on-tertiary-fixed:          #0b1c30;
            --color-on-tertiary-fixed-variant:  #38485d;
            --color-error:                      #ffb4ab;
            --color-on-error:                   #690005;
            --color-error-container:            #93000a;
            --color-on-error-container:         #ffdad6;
            --color-background:                 #111318;
            --color-on-background:              #e2e2e9;
            --color-surface:                    #111318;
            --color-on-surface:                 #e2e2e9;
            --color-surface-variant:            #44474f;
            --color-on-surface-variant:         #c5c6d0;
            --color-surface-dim:                #111318;
            --color-surface-bright:             #37393e;
            --color-surface-container-lowest:   #0c0e13;
            --color-surface-container-low:      #191c20;
            --color-surface-container:          #1d2024;
            --color-surface-container-high:     #282a2f;
            --color-surface-container-highest:  #33353a;
            --color-surface-tint:               #b1c6fb;
            --color-inverse-surface:            #e2e2e9;
            --color-inverse-on-surface:         #2e3135;
            --color-outline:                    #8f9099;
            --color-outline-variant:            #44474f;
            --color-mac-unregistered:           #6b7280;
            --color-mac-disconnected:           #d97706;
            --color-mac-connected:              #16a34a;
            --color-calendar-holiday:           #fb923c;
            --color-calendar-sunday:            #f87171;
            --color-calendar-saturday:          #60a5fa;
            --color-log-warning-container:      #5f4600;
            --color-on-log-warning-container:   #ffe08a;
            --color-log-fatal-container:        #4b166d;
            --color-on-log-fatal-container:     #f0dbff;
            --color-brand-red:                  #d88a86;
            --color-brand-orange:               #d9a06a;
            --color-brand-yellow:               #d7c77a;
            --color-brand-green:                #8eb98c;
            --color-brand-blue:                 #86a9d6;
            --color-brand-hal:                  #0052a5;
            --color-brand-indigo:               #9aa2d0;
            --color-brand-purple:               #bd93c7;
            --color-brand-red-light:            #e1a09b;
            --color-brand-orange-light:         #e0ae7c;
            --color-brand-yellow-light:         #ddd08d;
            --color-brand-green-light:          #9fc59d;
            --color-brand-blue-light:           #99b7dd;
            --color-brand-indigo-light:         #a9afd8;
            --color-brand-purple-light:         #c8a5d0;
            --color-brand-red-dark:             #7a2c2c;
            --color-brand-orange-dark:          #7d4a22;
            --color-brand-yellow-dark:          #76662a;
            --color-brand-green-dark:           #2d5c32;
            --color-brand-blue-dark:            #284d7d;
            --color-brand-indigo-dark:          #363b78;
            --color-brand-purple-dark:          #5a3568;
            --color-brand-red-soft:             #4d2a2b;
            --color-brand-orange-soft:          #4d3320;
            --color-brand-yellow-soft:          #4a4222;
            --color-brand-green-soft:           #263f2a;
            --color-brand-blue-soft:            #25384d;
            --color-brand-indigo-soft:          #2f334f;
            --color-brand-purple-soft:          #3f2d47;
        }

        .bg-brand-hal {
            background-color: var(--color-brand-hal);
        }