/* ==========================================================================
   MNX15 Design System — Color tokens
   Single source of truth for color. Imported by /css/style.css.
   Strictly monochrome brand + three narrow-purpose marker colors.
   ========================================================================== */
:root {
    /* ---- base palette ---- */
    --clr-black: #000000;
    --clr-white: #FFFFFF;

    --clr-gray-50: #FAFAFA;
    --clr-gray-100: #F5F5F5;
    --clr-gray-200: #EEEEEE;
    --clr-gray-300: #E0E0E0;
    --clr-gray-400: #BDBDBD;
    --clr-gray-500: #9E9E9E;
    --clr-gray-600: #757575;
    --clr-gray-700: #616161;
    --clr-gray-800: #424242;
    --clr-gray-900: #212121;

    --clr-error: #B00020;

    /* accent used only as a "selected / active" marker (size chips, color swatches) */
    --clr-accent-orange: orange;
    /* accent used for item SKU codes */
    --clr-accent-blue: rgb(68, 156, 232);

    /* Kakao social-login button (fixed 3rd-party brand color, not part of MNX15 palette) */
    --clr-kakao-bg: rgb(255, 232, 18);
    --clr-kakao-text: rgb(59, 60, 36);

    /* ---- semantic aliases ---- */
    --clr-primary-400: var(--clr-black);
    --clr-background: var(--clr-white);
    --clr-surface: var(--clr-white);
    --clr-surface-muted: var(--clr-gray-100);
    --clr-surface-page: var(--clr-gray-100);

    --clr-border: var(--clr-gray-200);
    --clr-border-strong: var(--clr-gray-400);

    --clr-text-primary: var(--clr-gray-900);
    --clr-text-secondary: var(--clr-gray-600);
    --clr-text-tertiary: var(--clr-gray-500);
    --clr-text-on-dark: var(--clr-white);
    --clr-text-disabled: var(--clr-gray-500);

    --clr-button-bg: var(--clr-black);
    --clr-button-bg-hover: var(--clr-gray-800);
    --clr-button-text: var(--clr-white);
}