/*
TRISITE CSS 5.0
initialize module
(C) 2026 TRISITE / K
*/

:root {
    /* Colors */
    --ts-color-text: #000;
    --ts-color-bg: #f5f5f5;
    --ts-color-border: #000;
    --ts-color-agree-bg: #006a3c;
    --ts-color-agree-text: #fdfdff;
    --ts-color-disagree-bg: rgb(219 67 67);
    --ts-color-disagree-text: #fdfdff;
    --ts-color-button-text: #334;
    --ts-color-button-bg: #ededef;
    --ts-color-button-text-hover: var(--ts-color-agree-text);
    --ts-color-button-bg-hover: var(--ts-color-agree-bg);
    --ts-color-form-bg: #fdfdff;
    --ts-color-disabled-text: #99a;
    --ts-color-link: #000;
    --ts-color-link-hover: rgb(37, 136, 194);

    /* Base Settings */
    --ts-level: 1;
    --ts-limit: 1300px;
    --ts-font-size: 16px;
    --ts-font-size-min: 12px;
    --ts-font-size-max: 50px;
    --ts-font-family: "Noto Sans JP", sans-serif;
    --ts-line-height: 1.6em;
    --ts-space: 1.5em;
    --ts-section-space: 10cqw;
    --ts-step: 1.2;
    --ts-blur: 40px;
    --ts-radius: 0;
    --ts-auto-fill: 15em;
    --ts-transition: .4s;
    --ts-grid-column: 1;
    --ts-brightness: 1.1;
    --ts-header-offset: 80px;
    --ts-shadow: 0 0 30px rgb(30 30 40 / 0.2), 0 0 3px rgb(30 30 40 / 0.4);
    --ts-scroll-marker: 60vh;
    --ts-header-height: 100px;

    /* Components */
    --ts-trigger-size: 50px;
    --ts-trigger-width: 32px;
    --ts-trigger-height: 3px;
    --ts-trigger-gap: 6px;
    --ts-trigger-text: #fdfdff;
    --ts-trigger-bg: #9aa;
    --ts-trigger-rotate-top: 35deg;
    --ts-trigger-rotate-bottom: 325deg;
    --ts-menu-bg: #fff;
    --ts-backdrop: rgb(255 255 255 / 0.2);

    /* Z-Index */
    --ts-z-header: 30;
    --ts-z-nav: 20;
    --ts-z-nav-cover: 10;
    --ts-z-footer: 1;
}

@media (prefers-color-scheme: dark) {
    html {
        filter: brightness(0.95) contrast(1.02);
    }
}