/*
 * Semantic colour tokens.
 *
 * One-to-one mapping of the Figma "Surface / Text / Border / Icon" variable
 * groups. Components MUST use these and never the raw scales of
 * tokens/palette.css, so a palette change propagates everywhere.
 */

:root {
    /* Surface — background of a block or a control. */
    --mo-surface-default: var(--mo-neutral-50);
    --mo-surface-default-white: var(--mo-white);
    --mo-surface-primary: var(--mo-neutral-500);
    --mo-surface-secondary: var(--mo-secondary-500);
    --mo-surface-action-dark: var(--mo-primary-500);
    --mo-surface-action-light: var(--mo-primary-50);
    --mo-surface-action-hover: var(--mo-neutral-500);
    --mo-surface-disabled: var(--mo-neutral-100);
    --mo-surface-information: var(--mo-information-500);
    --mo-surface-success: var(--mo-success-500);
    /* Spelled "Surface/succes" in Figma, like its border counterpart below. */
    --mo-surface-error: var(--mo-error-500);

    /* Text */
    --mo-text-default-dark: var(--mo-black);
    --mo-text-default-light: var(--mo-white);
    --mo-text-heading: var(--mo-neutral-600);
    --mo-text-body: var(--mo-neutral-500);
    --mo-text-placeholder: var(--mo-neutral-300);
    --mo-text-action: var(--mo-primary-500);
    --mo-text-action-hover: var(--mo-neutral-500);
    --mo-text-disabled: var(--mo-neutral-200);

    /* Border */
    --mo-border-default-light: var(--mo-white);
    --mo-border-default-medium: var(--mo-neutral-100);
    --mo-border-action: var(--mo-primary-500);
    --mo-border-action-hover: var(--mo-neutral-500);
    --mo-border-disabled: var(--mo-neutral-200);
    --mo-border-error: var(--mo-error-500);
    --mo-border-information: var(--mo-information-500);
    /* Spelled "Border/succes" in Figma; fixed here, the Figma typo is not propagated. */
    --mo-border-success: var(--mo-success-500);

    /* Icon */
    --mo-icon-default-dark: var(--mo-black);
    --mo-icon-default-light: var(--mo-white);
    --mo-icon-action: var(--mo-primary-500);
    --mo-icon-action-hover: var(--mo-neutral-500);
    --mo-icon-secondary: var(--mo-secondary-500);
    --mo-icon-disabled: var(--mo-neutral-200);

    /*
     * Focus ring. Not a Figma variable: the maquettes only describe a "Focus"
     * border on form controls. A visible ring is required for keyboard users
     * (WCAG 2.1 SC 2.4.7), so it reuses the information colour of that state.
     */
    --mo-focus-ring-color: var(--mo-information-500);
    --mo-focus-ring-width: 2px;
    --mo-focus-ring-offset: 2px;
}