@layer theme, base, components, layout; @layer theme {
                :root {
                    --black: oklch(0% 0 0);
                    --white: oklch(100% 0 0);
                    --bezierFastoutSlowin: cubic-bezier(0.4, 0.0, 0.2, 1);
                    --durationXS: 200ms;
                    --durationS: 300ms;
                    --durationM: 400ms;
                    --durationL: 600ms;
                    --durationXL: 800ms;
                    --systemFontStack: system-ui, -apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Ubuntu, Helvetica Neue, sans-serif;
                    --fontStack: Gotham, var(--systemFontStack);
                    --monoFontStack: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
                    --japaneseFontStack: IPA Gothic, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Hiragino Sans, Osaka, メイリオ, Meiryo, Segoe UI, sans-serif;
                    --fontWeightRegular: 400;
                    --fontWeightMedium: 500;
                    --fontWeightBold: 700;
                    --fontSizeH0: 8.75rem;
                    --fontSizeH1: 6.25rem;
                    --fontSizeH2: 3.625rem;
                    --fontSizeH3: 2.375rem;
                    --fontSizeH4: 1.75rem;
                    --fontSizeH5: 1.5rem;
                    --fontSizeBodyXL: 1.375rem;
                    --fontSizeBodyL: 1.25rem;
                    --fontSizeBodyM: 1.125rem;
                    --fontSizeBodyS: 1rem;
                    --fontSizeBodyXS: 0.875rem;
                    --lineHeightTitle: 1.1;
                    --lineHeightBody: 1.6;
                    --maxWidthS: 540px;
                    --maxWidthM: 720px;
                    --maxWidthL: 1096px;
                    --maxWidthXL: 1680px;
                    --spaceOuter: 64px;
                    --spaceXS: 4px;
                    --spaceS: 8px;
                    --spaceM: 16px;
                    --spaceL: 24px;
                    --spaceXL: 32px;
                    --space2XL: 48px;
                    --space3XL: 64px;
                    --space4XL: 96px;
                    --space5XL: 128px;
                    --zIndex0: 0;
                    --zIndex1: 4;
                    --zIndex2: 8;
                    --zIndex3: 16;
                    --zIndex4: 32;
                    --zIndex5: 64;
                }

                @media (max-width: 2080px) {
                    :root {
                        --fontSizeH0: 7.5rem;
                        --fontSizeH1: 5rem;
                    }
                }

                @media (max-width: 1680px) {
                    :root {
                        --maxWidthS: 480px;
                        --maxWidthM: 640px;
                        --maxWidthL: 1000px;
                        --maxWidthXL: 1100px;
                        --spaceOuter: 48px;
                        --fontSizeH0: 6.25rem;
                        --fontSizeH1: 4.375rem;
                        --fontSizeH2: 3.125rem;
                        --fontSizeH3: 2.25rem;
                        --fontSizeH4: 1.625rem;
                        --fontSizeH5: 1.375rem;
                    }
                }

                @media (max-width: 1040px) {
                    :root {
                        --fontSizeH0: 5rem;
                        --fontSizeH1: 3.75rem;
                        --fontSizeH2: 3rem;
                        --fontSizeH3: 2rem;
                        --fontSizeH4: 1.5rem;
                        --fontSizeH5: 1.25rem;
                    }
                }

                @media (max-width: 696px) {
                    :root {
                        --spaceOuter: 24px;
                        --fontSizeH0: 3.5rem;
                        --fontSizeH1: 2.5rem;
                        --fontSizeH2: 2.125rem;
                        --fontSizeH3: 1.75rem;
                        --fontSizeH4: 1.375rem;
                        --fontSizeH5: 1.125rem;
                        --fontSizeBodyL: 1.0625rem;
                        --fontSizeBodyM: 1rem;
                        --fontSizeBodyS: 0.875rem;
                    }
                }

                @media (max-width: 400px) {
                    :root {
                        --spaceOuter: 16px;
                        --fontSizeH0: 2.625rem;
                        --fontSizeH1: 2.375rem;
                        --fontSizeH2: 1.75rem;
                        --fontSizeH3: 1.5rem;
                        --fontSizeH4: 1.25rem;
                    }
                }

                [data-theme='dark'] {
                    --background: oklch(17.76% 0 0);
                    --backgroundLight: oklch(21.78% 0 0);
                    --primary: oklch(81.70% 0.128 211.38);
                    --accent: oklch(81.70% 0.128 211.38);
                    --error: oklch(65.91% 0.249 13.76);
                    --text: var(--white);
                    --textTitle: var(--text);
                    --textBody: color-mix(in lab, var(--text) 80%, transparent);
                    --textLight: color-mix(in lab, var(--text) 60%, transparent);
                    --logoFilter: invert(1);
                }

                [data-theme='light'] {
                    --background: oklch(96.12% 0 0);
                    --backgroundLight: var(--white);
                    --primary: var(--black);
                    --accent: oklch(81.70% 0.128 211.38);
                    --error: oklch(62.43% 0.211 290.95);
                    --text: var(--black);
                    --textTitle: color-mix(in lab, var(--text) 90%, transparent);
                    --textBody: color-mix(in lab, var(--text) 75%, transparent);
                    --textLight: color-mix(in lab, var(--text) 55%, transparent);
                    --logoFilter: none;
                }

                @font-face {
                    font-family: Gotham;
                    font-weight: 400;
                    src: url(/assets/fonts/gotham-book.woff2) format('woff2');
                    font-display: block;
                    font-style: normal;
                }

                @font-face {
                    font-family: Gotham;
                    font-weight: 400;
                    src: url(/assets/fonts/gotham-book-italic.woff2) format('woff2');
                    font-display: block;
                    font-style: italic;
                }

                @font-face {
                    font-family: Gotham;
                    font-weight: 500;
                    src: url(/assets/fonts/gotham-medium.woff2) format('woff2');
                    font-display: block;
                    font-style: normal;
                }

                @font-face {
                    font-family: Gotham;
                    font-weight: 500;
                    src: url(/assets/fonts/gotham-medium-italic.woff2) format('woff2');
                    font-display: block;
                    font-style: italic;
                }

                @font-face {
                    font-family: Gotham;
                    font-weight: 700;
                    src: url(/assets/fonts/gotham-bold.woff2) format('woff2');
                    font-display: block;
                    font-style: normal;
                }

                @font-face {
                    font-family: Gotham;
                    font-weight: 700;
                    src: url(/assets/fonts/gotham-bold-italic.woff2) format('woff2');
                    font-display: block;
                    font-style: italic;
                }

                @font-face {
                    font-family: IPA Gothic;
                    font-weight: 400;
                    src: url(/assets/fonts/ipa-gothic.woff2) format('woff2');
                    font-display: swap;
                    font-style: normal;
                }

                @font-face {
                    font-family: 'AkayaKanadaka';
                    font-weight: 400;
                    src: url(/assets/fonts/AkayaKanadaka-Regular.ttf) format('truetype');
                    font-display: block;
                    font-style: normal;
                }
            }
