/* @group @variables - color */


:root {

--color-brand: hsla(122.8, 43.4%, 38.8%, 1);
--color-brand-footer: hsla(122.8, 38.4%, 33.8%, 1);
--color-brand-link-border: hsla(122.8, 43.4%, 59.6%, .85);
--color-brand-action: hsla(122.8, 50%, 54.6%, 1);
--color-brand-action-page-top: hsla(122.8, 43.4%, 54.6%, .85);
--color-brand-action-border: hsla(122.8, 43.4%, 54.6%, .85);
--color-brand-active: hsla(122.8, 50%, 49.6%, 1);
--color-brand-active-border: hsla(122.8, 50%, 49.6%, .85);

--color-brand-disabled: hsla(122.8, 43.4%, 38.8%, .5);
--color-brand-highlight: hsla(122.8, 43.4%, 38.8%, .15);
--color-brand-marker: hsla(122.8, 43.4%, 38.8%, .075);

--color-brand-background: hsla(122.8, 43.4%, 97.5%, 1);
--color-brand-background-action: hsla(122.8, 50%, 97.5%, 1);
--color-brand-background-active: hsla(122.8, 50%, 97.5%, 1);

--color-secondary: hsla(221.7, 82.4%, 62.2%, 1);
--color-secondary-highlight: hsla(221.7, 82.4%, 62.2%, .15);
--color-secondary-border: hsla(221.7, 82.4%, 62.2%, .4);
}

/* @end @variables - color */

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

/* @group @variables - color */

:root {
--color-brand-hue: 122.8;
--color-secondary-hue: 221.7;
--color-tertiary-hue: 220;
--color-quaternary-hue: 150;

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

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-brand-border-primary: hsla(122.8, 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-tertiary-border-primary: hsla(var(--color-tertiary-hue), var(--color-border-primary));
--color-quaternary-border-primary: hsla(var(--color-quaternary-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));
--color-tertiary-border-secondary: hsla(var(--color-tertiary-hue), var(--color-border-secondary));
--color-quaternary-border-secondary: hsla(var(--color-quaternary-hue), var(--color-border-secondary));
}

/* @end @variables - color */

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

/* @group @variables font-family */

:root {
--font-family-brand-en: 'Inter var';
--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: '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;
--font-family-primary: HiraginoSans, 'Hiragino Sans', system-ui, -apple-system, Roboto, Helvetica, 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 */