@layer child-tokens {
    :root {
        /* primitive-fonts */
        --font-family-sans-ja: "Noto Sans JP", sans-serif;
        --font-family-eb-garamond: "EB Garamond", serif;
        --font-family-tex-gyre-pagella: "TeX Gyre Pagella", "TeX Gyre Pagella PRIME", var(--font-family-eb-garamond);
        --font-family-zen-old-mincho: "Zen Old Mincho", serif;

        /* semantic-fonts */
        --font-base: var(--font-family-sans-ja);
        --font-serif-en: var(--font-family-eb-garamond);
        --font-serif-ja: var(--font-family-zen-old-mincho);
        --font-logo: var(--font-family-tex-gyre-pagella);

        /* layout */
        --layout-site-header-height: 80px;
        --layout-site-header-inset-top: 20px;
        --layout-site-header-inset-x: 20px;
        --layout-site-header-container-height: calc(
            var(--layout-site-header-height) - var(--layout-site-header-inset-top)
        );
        --layout-scroll-offset: var(--layout-site-header-height);
        --layout-padding-horizontal-base: 5.25vw;

        /* font-sizes */
        --font-size-xxs: .625rem;
        --font-size-xs: .75rem;
        --font-size-s: .875;
        --font-size-l: 1.125rem;
        --font-size-xl: 1.25rem;

        /* palette */
        --palette-black-rgb: 32 32 32;
        --palette-white-rgb: 255 255 255;
        --palette-sand-light-rgb: 248 245 242;
        --palette-sand-medium-rgb: 238 230 223;
        --palette-sand-dark-rgb: 229 203 180;
        --palette-green-base-rgb: 40 145 112;

        /* semantic-colors */
        --color-text-rgb: var(--palette-black-rgb);
        --color-text-on-accent-rgb: var(--palette-white-rgb);
        --color-bg-rgb: var(--palette-sand-light-rgb);
        --color-bg-sub-rgb: var(--palette-sand-medium-rgb);
        --color-bg-white-rgb: var(--palette-white-rgb);
        --color-shadow-sand-rgb: var(--palette-sand-dark-rgb);
        --color-accent-rgb: var(--palette-green-base-rgb);

        /* resolved-colors */
        --color-text: rgb(var(--color-text-rgb));
        --color-text-on-accent: rgb(var(--color-text-on-accent-rgb));
        --color-bg: rgb(var(--color-bg-rgb));
        --color-bg-sub: rgb(var(--color-bg-sub-rgb));
        --color-bg-white: rgb(var(--color-bg-white-rgb));
        --color-shadow-sand: rgb(var(--color-shadow-sand-rgb));
        --color-accent: rgb(var(--color-accent-rgb));
    }
}
@layer base {
    body {
        font-family: var(--font-base);
        font-weight: 500;
    }
}
@layer utilities {
    .staldia-font-logo {
        font-family: var(--font-logo);
        font-weight: 400;
    }
    .staldia-font-serif-en {
        font-family: var(--font-serif-en);
        font-weight: 400;
    }
    .staldia-font-serif-ja {
        font-family: var(--font-serif-ja);
    }
    .staldia-bold { font-weight: 700; }
    .staldia-font-size-xs { font-size: var(--font-size-xs); }
    .staldia-font-size-s { font-size: var(--font-size-s); }
    .staldia-font-size-l { font-size: var(--font-size-l); }
    .staldia-font-size-xl { font-size: var(--font-size-xl); }
    .staldia-block { display: block; }
    .staldia-grid { display: grid; }
    .staldia-flex-wrap {
        display: flex;
        flex-wrap: wrap;
    }
    .staldia-align-items-center { align-items: center; }
    .staldia-align-items-end { align-items: end; }
    .staldia-relative { position: relative; }
}