/* @group @variables - color */


:root {

--color-brand: hsla(53, 48.6%, 58.8%, 1);

--color-brand-text: hsla(53, 40%, 40%, 1);
--color-brand-opacity: hsla(53, 40%, 40%, .9375);
--color-brand-link-border: hsla(53, 40%, 55%, .85);

--color-brand-action: hsla(53, 50%, 50%, 1);
--color-brand-action-page-top: hsla(53, 40%, 50%, .85);
--color-brand-action-border: hsla(53, 40%, 40%, .85);
--color-brand-active: hsla(53, 50%, 35%, 1);
--color-brand-active-border: hsla(53, 50%, 35%, .85);

--color-brand-action-secondary: hsla(53, 95%, 97.5%, 1);
--color-brand-active-secondary: hsla(53, 95%, 90%, 1);

--color-brand-disabled: hsla(53, 50%, 45%, var(--alpha-disabled));
--color-brand-highlight: hsla(53, 50%, 45%, var(--alpha-highlight));
--color-brand-marker: hsla(53, 50%, 45%, var(--alpha-marker));


--color-dark-green: hsla(145, 30%, 35%, 1);
--color-dark-green-action: hsla(145, 50%, 50%, 1);
--color-dark-green-action-page-top: hsla(145, 40%, 50%, .85);
--color-dark-green-action-border: hsla(145, 40%, 40%, .85);
--color-dark-green-active: hsla(145, 50%, 35%, 1);
--color-dark-green-active-border: hsla(145, 50%, 35%, .85);

--color-dark-green-action-secondary: hsla(145, 95%, 97.5%, 1);
--color-dark-green-active-secondary: hsla(145, 95%, 90%, 1);

--color-dark-green-disabled: hsla(145, 50%, 45%, var(--alpha-disabled));
--color-dark-green-highlight: hsla(145, 50%, 45%, var(--alpha-highlight));
--color-dark-green-marker: hsla(145, 50%, 45%, var(--alpha-marker));

--color-light-green: hsla(145, 50%, 97.5%, 1);

--color-middle-green: hsla(145, 22.1%, 66.3%, 1);
--color-middle-green-text: hsla(145, 40%, 40%, 1);
--color-middle-green-link-border: hsla(145, 40%, 55%, .85);
--color-middle-green-opacity: hsla(145, 22.1%, 40%, .9375);

--color-middle-green-action: hsla(145, 50%, 50%, 1);
--color-middle-green-action-page-top: hsla(145, 40%, 50%, .85);
--color-middle-green-action-border: hsla(145, 40%, 40%, .85);
--color-middle-green-active: hsla(145, 50%, 35%, 1);
--color-middle-green-active-border: hsla(145, 50%, 35%, .85);

--color-middle-green-action-secondary: hsla(145, 95%, 97.5%, 1);
--color-middle-green-active-secondary: hsla(145, 95%, 90%, 1);

--color-middle-green-disabled: hsla(145, 50%, 45%, var(--alpha-disabled));
--color-middle-green-highlight: hsla(145, 50%, 45%, var(--alpha-highlight));
--color-middle-green-marker: hsla(145, 50%, 45%, var(--alpha-marker));


--color-theme-green: hsla(166, 38%, 53%, 1);
--color-theme-blue: hsla(197, 38%, 53%, 1);
--color-theme-red: hsla(197, 38%, 53%, 1);
}

/* @end @variables - color */

/* --------------------------------------------------------*/

/* @group @variables - color */

:root {
--color-brand-hue: 53;
--color-middle-green-hue: 168.9;

--color-success-hue: 120;
--color-error-hue: 355;
--color-warning-hue: 95%;
--color-focus-hue: 205;

}

/* @end @variables - color */

/* @group @variables - color */

:root {

--color-background-primary: 50%, 40%, 1;
--color-brand-background-primary: hsla(var(--color-brand-hue), var(--color-background-primary));

--color-middle-green-background-primary: hsla(var(--color-middle-green-hue), var(--color-background-primary));

--color-background-secondary: 40%, 97.5%, 1;
--color-brand-background-secondary: hsla(var(--color-brand-hue), var(--color-background-secondary));
--color-middle-green-background-secondary: hsla(var(--color-middle-green-hue), var(--color-background-secondary));
}

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-brand-border-primary: hsla(53, 50%, 85%, 1);
--color-border-primary: 50%, 85%, 1;
--color-brand-border-primary: hsla(var(--color-brand-hue), var(--color-border-primary));
--color-middle-green-border-primary: hsla(var(--color-middle-green-hue), var(--color-border-primary));

--color-border-secondary: 60%, 95%, 1;
--color-brand-border-secondary: hsla(var(--color-brand-hue), var(--color-border-secondary));
--color-middle-green-border-secondary: hsla(var(--color-middle-green-hue), var(--color-border-secondary));
}

/* @end @variables - color */

/* @group @variables - form color */

:root {
--color-autofill: hsla(220, 90%, 95%, 1);
--color-input-disabled: hsla(220, 10%, 85%, 1);
--color-success-primary: hsla(120, 55%, 45%, 1);
--color-success-secondary: hsla(120, 60%, 95%, 1);
--color-error-primary: hsla(355, 55%, 55%, 1);
--color-error-secondary: hsla(355, 60%, 95%, 1);
--color-warning-primary: hsla(50, 95%, 47.5%, 1);
--color-warning-secondary:hsla(50, 100%, 95%, 1);
--color-focus-primary: hsla(205, 55%, 55%, 1);
--color-focus-secondary: hsla(205, 90%, 97.5%, 1);
--color-focus-tertiary: hsla(205, 55%, 75%, 1);
}

/* @end @variables - form color */

/* --------------------------------------------------------*/

/* @group @variables font-family */

:root {
--font-family-brand-en: 'Antic Didone', 'Noto Serif JP', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro', 'Noto Serif CJK JP', '游明朝体', 'Yu Mincho', YuMincho, serif;
--font-family-default: HiraginoSans, 'Hiragino Sans', system-ui, -apple-system, Roboto, Helvetica, 'Segoe UI', HiraginoSans, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'Noto Sans CJK JP', NotoSansCJKjp-Light, 'Noto Sans CJK JP Light', 'Noto Sans CJK JP', '游ゴシック', 'Yu Gothic', 'Meiryo', sans-serif;
--font-family-numeric: 'Crimson Text', 'Source Sans Pro', YuMincho, serif;

--font-family-pre: Consolas, Monaco, 'Andale Mono', monospace, system-ui, -apple-system, Roboto, Helvetica, 'Segoe UI', 'Noto Sans CJK JP', 'Noto Sans', HiraginoSans, 'Hiragino Kaku Gothic Pro', 'Noto Sans CJK JP', 'Yu Gothic', 'Meiryo', sans-serif;
--font-family-primary: HiraginoSans, 'Hiragino Sans', system-ui, -apple-system, Roboto, Helvetica, 'Segoe UI', HiraginoSans, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'Noto Sans CJK JP', NotoSansCJKjp-Light, 'Noto Sans CJK JP Light', 'Noto Sans CJK JP', '游ゴシック', 'Yu Gothic', 'Meiryo', sans-serif;
--font-family-secondary: HiraginoSans, 'Hiragino Sans', system-ui, -apple-system, Roboto, Helvetica, 'Segoe UI', sans-serif;
--font-family-brand-secondary: var(--font-family-brand-en), system-ui, -apple-system, Roboto, Helvetica, 'Segoe UI', sans-serif;
--font-family-inherit: inherit;
}

/* @end @variables - text-block */