/*
ENTAG FRAME 1.3
initialize module
(C) 2026 ENTAG / K
*/

:root {
    /* Colors */
    --et-color-text: #595455;
    --et-color-bg: #fefeff;
    --et-color-border: transparent;
    --et-color-agree-bg: #0088a8;
    --et-color-agree-text: #fefeff;
    --et-color-disagree-bg: #d00164;
    --et-color-disagree-text: #fefeff;
    --et-color-button-text: var(--et-color-agree-text);
    --et-color-button-bg: var(--et-color-agree-bg);
    --et-color-button-text-hover: var(--et-color-agree-text);
    --et-color-button-bg-hover: rgba(255, 254, 254, 0.9);
    --et-color-form-bg: rgba(255, 254, 254, 0.7);
    --et-color-disabled-text: #a99;
    --et-color-link: var(--et-color-agree-text);
    --et-color-link-hover: var(--et-color-agree-text);

    /* Base Settings */
    --et-level: 1;
    --et-font-size: 14px;
    --et-font-size-min: 12px;
    --et-font-size-max: 50px;
    --et-font-family: "Noto Sans JP", sans-serif;
    --et-line-height: 1.6em;
    --et-space: 20px;
    --et-section-space: 40px;
    --et-step: 1.2;
    --et-limit: 1200px;
    --et-width-ratio: 1;
    --et-blur: 4em;
    --et-radius: 16px;
    --et-auto-fill: 15em;
    --et-transition: .4s;
    --et-brightness: 1.1;
    --et-header-offset: 80px;
    --et-shadow: 0 0 8px -4px hsla(198, 13%, 19%, 0.7) , 0 0 50px -20px hsla(199, 19%, 36%, 0.3);
	--et-shadow-light: 3px 3px 5px -3px hsl(190 60% 30% / 10%);
    --et-scroll-marker: 60vh;
    --et-header-height: 165px;
    --et-medium-width: 80%;
    --et-narrow-width: 60%;

    /* Components */
    --et-trigger-size: 80px;
    --et-trigger-width: 35px;
    --et-trigger-height: 2px;
    --et-trigger-gap: 5px;
    --et-trigger-text: var(--et-color-bg);
    --et-trigger-bg: var(--et-color-text);
    --et-trigger-rotate-top: 35deg;
    --et-trigger-rotate-bottom: 325deg;
    --et-menu-bg: transparent;
    --et-backdrop: rgb(245 245 245 / 0.5);

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

@property --std-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 1200px;
}
@property --tb-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 820px;
}
@property --sp-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 520px;
}

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