

/* @group @variables - color with site theme */

:root {

--color-primary: hsla(180, 50.2%, 44.9%, 1);
--color-proto: hsla(198.6, 69.3%, 44.7%, 1);
--color-primary-action: hsla(180, 50.2%, 39.9%, 1);
--color-primary-active: hsla(180, 50.2%, 44.9%, 1);
--color-primary-highlight: hsla(180, 50.2%, 44.9%, .375);

--color-primary-border: hsla(180, 50.2%, 44.9%, .85);
--color-primary-action-border: hsla(180, 50.2%, 39.9%, .85);
--color-primary-active-border: hsla(180, 50.2%, 44.9%, .85);


--color-primary-action-secondary: hsla(180, 50.2%, 95%, 1);
--color-primary-active-secondary: hsla(180, 50.2%, 92.5%, 1);

--color-primary-disabled: hsla(180, 50.2%, 44.9%, var(--alpha-disabled));
--color-primary-highlight: hsla(180, 50.2%, 44.9%, var(--alpha-highlight));
--color-primary-marker: hsla(180, 50.2%, 44.9%, var(--alpha-marker));

--color-secondary: hsla(180, 50.2%, 97.5%, 1);
--color-tertiary: hsla(180, 50.2%, 95%, 1);
--color-quaternary: hsla(200, 71.4%, 95%, 1);

--color-text: hsla(220, 10%, 30%, 1);
--color-text-action: hsla(220, 10%, 35%, 1);
--color-text-active: hsla(220, 10%, 40%, 1);
--color-text-disabled: hsla(220, 10%, 30%, .5);
--color-text-placeholder: hsla(220, 10%, 30%, .5);


/*--color-senary: hsla(180, 25%, 97%, 1);

--color-tertiary: hsla(198, 15%, 97.5%, 1);
--color-quaternary: hsla(198, 30%, 92.5%, 1);*/
}

/* @end @variables - color with site theme */

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

/* @group @variables - disabed color */

:root {
--btn-disabled-background-color: hsla(30, 5%, 85%, .5);
}

/* @end @variables - disabed color */

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

/* @group @variables font-family */

:root {
--font-family-heading: 'Merriweather Italic', serif;
--font-family-default: 'Inter var', Roboto, Helvetica, 'Segoe UI', 'Hiragino Sans', 'Noto Sans CJK JP', system-ui, -apple-system, 'Yu Gothic', 'Meiryo', sans-serif;
--font-family-vertical: 'Hiragino Sans', 'Noto Sans CJK JP', 'Meiryo', system-ui, -apple-system, 'Yu Gothic', sans-serif;
--font-family-numeric: 'Open Sans', 'Source Sans Pro', 'Lato', 'Noto Sans CJK JP', system-ui, -apple-system, BlinkMacSystemFont, 'Yu Gothic', 'Meiryo', sans-serif;
--font-family-pre: Consolas, Monaco, 'Andale Mono', monospace, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-family-inherit: inherit;
}

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