/*
 * Spacing, layout margin and the fixed size scale.
 *
 * The Figma variable collection is responsive: it carries four modes named
 * after a device width (1920 / 1440 / 768 / 480). Reading the same variables
 * from the four "03 Maquettes" sections gives:
 *
 *   token             1920   1440    768    480
 *   Margin/body-lr     120     64     40     24
 *   Spacing/xxxs         4      4      2      2
 *   Spacing/xxs          8      8      4      4
 *   Spacing/xs          16     16      8      8
 *   Spacing/sm          24     24     16     16
 *   Spacing/md          40     40     32     32
 *   Spacing/lg          64     64     40     40
 *   Spacing/xl          80     80     64     64
 *   Spacing/xxl        120    120     80     80
 *
 * So every spacing step has two tiers with the same 1440 break, while the body
 * margin has a distinct value per breakpoint. Written mobile-first below.
 *
 * The last three rows were given by the designer from the Figma variable panel.
 * They cannot be read back from the file: the large steps are deliberately
 * reserved for large screens, so no small-screen node binds them, and
 * get_variable_defs only reports variables a node actually binds.
 *
 * Scale/* is NOT responsive: the same value in the four modes. It sizes
 * components (icon boxes, control heights, inner padding), where Spacing/*
 * separates them.
 */

:root {
    /*
     * Breakpoints, for reference and for JavaScript. CSS custom properties are
     * not usable inside a media query, so the values below are repeated
     * literally in the @media rules of this file and of the layout files.
     */
    --mo-breakpoint-tablet: 768px;
    --mo-breakpoint-laptop: 1440px;
    --mo-breakpoint-desktop: 1920px;

    /* Spacing — separates blocks. Mobile tier (< 1440px). */
    --mo-spacing-none: 0;
    --mo-spacing-xxxs: 2px;
    --mo-spacing-xxs: 4px;
    --mo-spacing-xs: 8px;
    --mo-spacing-sm: 16px;
    --mo-spacing-md: 32px;
    --mo-spacing-lg: 40px;
    --mo-spacing-xl: 64px;
    --mo-spacing-xxl: 80px;

    /* Horizontal margin of the page content. */
    --mo-margin-body-lr: 24px;

    /* Scale — sizes components. Identical in the four modes. */
    --mo-scale-50: 4px;
    --mo-scale-200: 16px;
    --mo-scale-250: 20px;
    --mo-scale-300: 24px;
    --mo-scale-350: 28px;
    --mo-scale-400: 32px;
    --mo-scale-500: 40px;
    --mo-scale-600: 48px;
    --mo-scale-800: 64px;
    --mo-scale-1000: 80px;
}

@media (min-width: 768px) {
    :root {
        --mo-margin-body-lr: 40px;
    }
}

@media (min-width: 1440px) {
    :root {
        --mo-spacing-xxxs: 4px;
        --mo-spacing-xxs: 8px;
        --mo-spacing-xs: 16px;
        --mo-spacing-sm: 24px;
        --mo-spacing-md: 40px;
        --mo-spacing-lg: 64px;
        --mo-spacing-xl: 80px;
        --mo-spacing-xxl: 120px;

        --mo-margin-body-lr: 64px;
    }
}

@media (min-width: 1920px) {
    :root {
        --mo-margin-body-lr: 120px;
    }
}