/*
 * Brand gradients.
 *
 * The "01 Design system" page of the Figma file declares one gradient, from the warm orange of the
 * palette to the primary pink. It is painted three ways in the maquettes, each with its own
 * geometry, so the stops are declared once and the shapes reuse them:
 *
 *  - `bar`    the header band (radial ellipse centred left of the middle, far taller than the band,
 *             so it reads as a horizontal sweep);
 *  - `block`  the highlighted event card (radial ellipse anchored low and left);
 *  - `sweep`  the plain left-to-right run, shared by the two paintings below;
 *  - `text`   the section headings of the search panel, painted through `background-clip: text`;
 *  - `stroke` the border of a card — the maquette paints several card strokes with the gradient
 *             rather than with a flat colour (measured on the "dernière visio" call-out
 *             4402:1303, on `lg-card-article` 4402:1338 and on the rubric introduction 4488:7382);
 *  - `veil`   the top bar of the back office (Figma "Frame 4", 4683:20859), the same sweep at 20%
 *             alpha so it reads as a tint over white rather than as a band.
 *
 * The percentages replace the pixel geometry of the maquette so the gradient follows the size of
 * its box at the four breakpoints instead of being pinned to a 1920px canvas. The maquette gives
 * each stroke its own geometry; sampling three of them gives the same left-to-right run within a
 * couple of units per channel, so they share one linear sweep here.
 */

:root {
    /*
     * Warm end of the gradient. Named because the back office top bar borders itself with it: the
     * border and the first stop must stay the same colour, so they read the same variable.
     */
    --mo-gradient-brand-warm: #fac791;

    --mo-gradient-stops:
        var(--mo-gradient-brand-warm) 25.78%,
        #fba38e 44.34%,
        #fd7f8b 62.89%,
        #fe5b87 81.45%,
        #ff3784 100%;

    --mo-gradient-brand-bar: radial-gradient(76% 271% at 30% 50%, var(--mo-gradient-stops));
    --mo-gradient-brand-block: radial-gradient(88% 314% at 18% 66%, var(--mo-gradient-stops));

    /* Even run of the same five colours, used by the flat paintings below. */
    --mo-gradient-sweep-stops:
        var(--mo-gradient-brand-warm) 0%,
        #fba38e 25%,
        #fd7f8b 50%,
        #fe5b87 75%,
        #ff3784 100%;

    --mo-gradient-brand-sweep: linear-gradient(90deg, var(--mo-gradient-sweep-stops));
    --mo-gradient-brand-text: var(--mo-gradient-brand-sweep);
    --mo-gradient-brand-stroke: var(--mo-gradient-brand-sweep);

    /*
     * Corner to corner, for a box that is filled rather than stroked: the highlighted trade tile
     * under the pointer (Figma `card-trad` `Type=Main, State=Hover`, 4519:5494), warm at the top
     * left and pink at the bottom right.
     */
    --mo-gradient-brand-tile: linear-gradient(135deg, var(--mo-gradient-sweep-stops));

    /*
     * A gradient cannot be a `border-color`, so a gradient-stroked box paints two layers behind a
     * transparent border: its own fill clipped to the padding box, then the sweep clipped to the
     * border box. A component opts in with four declarations, spelled out rather than hidden in a
     * variable — a `var()` nested in a custom property is substituted where the property is
     * *declared*, so a per-component fill passed that way would silently keep the root value:
     *
     *     border: var(--mo-border-width-sm) solid transparent;
     *     background-image:
     *         linear-gradient(var(--mo-surface-default-white) 0 0),
     *         var(--mo-gradient-brand-stroke);
     *     background-clip: padding-box, border-box;
     *     background-origin: border-box;
     *
     * The fill MUST come from that first layer and not from `background-color`, which paints under
     * the whole border box and would hide the sweep.
     */
    --mo-gradient-brand-veil: linear-gradient(
        87deg,
        rgb(250 199 145 / 20%) 13%,
        rgb(255 55 132 / 20%) 98%
    );
}