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

:root {
--color-primary: hsla(337.3, 38.1%, 72%, 1);
--color-primary-action: hsla(337.3, 38.1%, 67%, 1);
--color-primary-active: hsla(337.3, 38.1%, 62%, 1);

--color-primary-background-color: hsla(348, 50%, 97.5%, 1);
--color-primary-disabled: hsla(348, 50%, 45%, var(--alpha-disabled));
--color-primary-highlight: hsla(348, 50%, 45%, var(--alpha-highlight));
--color-primary-marker: hsla(348, 50%, 45%, var(--alpha-marker));

--color-secondary: hsla(337.3, 38.1%, 76%, 1);
--color-secondary-action: hsla(337.3, 38.1%, 66%, 1);
--color-secondary-active: hsla(337.3, 38.1%, 56%, 1);

--color-quinary: hsla(220, 15%, 30%, 1);

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

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

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

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

:root {
--color-premier: hsla(337.3, 60.1%, 60%, 1);
--color-premier-action: hsla(337.3, 60.1%, 55%, 1);
--color-premier-active: hsla(337.3, 69.1%, 50%, 1);
--color-premier-disabled: hsla(337.3, 69.1%, 50%, var(--alpha-disabled));
--color-premier-highlight: hsla(337.3, 69.1%, 50%, var(--alpha-highlight));

--color-deuxieme: hsla(337.3, 68.1%, 72%, 1);
--color-deuxieme-action: hsla(337.3, 68.1%, 40%, 1);
--color-deuxieme-active: hsla(337.3, 68.1%, 35%, 1);

--color-toryism: hsl(120, 60.1%, 60%, 1);
--color-toryism-action: hsla(337.3, 60.1%, 55%, 1);
--color-toryism-active: hsla(337.3, 69.1%, 50%, 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 - form color */

:root {
--color-autofill: hsla(30, 90%, 95%, 1);
--color-input-disabled: hsla(30, 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 - rating color */

:root {
--color-sale-primary: hsla(355, 95%, 55%, 1);
--color-soldout-primary: var(--color-gainsboro);
--color-new-primary: var(--color-priamry);
--color-star: hsla(40, 100%, 50%, 1);
--color-star-mask: var(--color-gainsboro);
}

/* @end @variables - rating color */


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

/* @group @variables - icon */

:root {
--icon-width: 1.5rem;
--icon-height: 1.5rem;
--icon-background-color: currentColor;
--icon-action-background-color: currentColor;
--icon-active-background-color: currentColor;
}

/* @end @variables - icon */

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

/* @group @variables font-family */

:root {
/*--font-family-heading: 'Montserrat', Roboto, Helvetica, 'Segoe UI', Lato, 'Hiragino Sans', 'Noto Sans CJK JP', system-ui, -apple-system, 'Yu Gothic', 'Meiryo', sans-serif;
--font-family-default: system-ui, -apple-system, 'Yu Gothic', 'Meiryo', sans-serif;*/
--font-family-heading: 'Hiragino Sans', 'Meiryo', 'Noto Sans CJK JP', system-ui, -apple-system, 'Yu Gothic', 'Meiryo', sans-serif;
--font-family-default: 'Hiragino Sans', 'Meiryo', 'Noto Sans CJK JP', system-ui, -apple-system, 'Yu Gothic', 'Meiryo', 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 */