/* @group @variables - color */

:root {

--color-brand: hsla(204.5, 100%, 40.8%, 1);
--color-brand-secondary: hsla(204.5, 100%, 90%, 1);
--color-brand-link-border: hsla(204.5, 40%, 55%, .85);
--color-brand-action: hsla(204.5, 65%, 41% 1);
--color-brand-action-page-top: hsla(204.5, 55%, 41%, .85);
--color-brand-action-border: hsla(204.5, 65%, 41%, .85);
--color-brand-active: hsla(204.5, 65%, 36%, 1);
--color-brand-active-border: hsla(204.5, 65%, 31%, .85);

--color-brand-action-secondary: hsla(204.5, 65%, 97.5%, 1);
--color-brand-active-secondary: hsla(204.5, 55%, 90%, 1);

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

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-secondary: hsla(324.5, 100%, 40.8%, 1);
--color-tertiary: hsla(50.5, 100%, 45.8%, 1)
}

/* @end @variables - color */

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

/* @group @variables - color */

:root {
--color-brand-hue: 204.5;
--color-secondary-hue: 324.5;

--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-secondary-background-primary: hsla(var(--color-secondary-hue), var(--color-background-primary));

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

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-brand-border-primary: hsla(204.5, 50%, 85%, 1);
--color-border-primary: 50%, 85%, 1;
--color-brand-border-primary: hsla(var(--color-brand-hue), var(--color-border-primary));
--color-secondary-border-primary: hsla(var(--color-secondary-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-secondary-border-secondary: hsla(var(--color-secondary-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: 'Lora', 'Open Sans', 'Source Sans Pro', 'Lato', -apple-system, 'BlinkMacSystemFont', sans-serif;
--font-family-default: 'Open Sans', 'Noto Sans JP', 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: 'Oswald', 'Open Sans', 'Source Sans Pro', 'Lato', -apple-system, 'BlinkMacSystemFont', HiraginoSans, 'Hiragino Sans', 'NotoSansJP', 'Noto Sans CJK JP', NotoSansCJKjp-Light, 'Noto Sans CJK JP Light', '游ゴシック', 'Yu Gothic', 'Meiryo', monospace, sans-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;
}

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