/*
 * Colour and typography of the administrative interface.
 *
 * This file is the only place where a colour of the administrative interface is
 * defined. New screens take their colour from here; they do not declare their own.
 *
 * The administrative interface is the Light variant of the brand: white or light
 * grey background, navy text, blue call to action. That is why the yellow is a
 * fill and never a call to action here, and why the cyan is decoration only.
 */

:root {
    --sf-blue: #0052F7;
    --sf-navy: #030342;
    --sf-cyan: #00C7F5;
    --sf-yellow: #FBBF24;
    --sf-violet: #7C3AED;
    --sf-violet-bg: #F5F3FF;
    --sf-white: #FFFFFF;
    --sf-gray: #F6F6F6;
    --sf-black: #000000;

    --sf-text: #030342;
    --sf-text-muted: rgba(3, 3, 66, 0.70);

    /*
     * The brand manual defines no colour for success and error, and the platform
     * needs both in hundreds of places to keep its metrics readable. These two
     * values are provisional: they were chosen so that every pairing with white
     * reaches the same contrast band as the brand blue, and they are pending
     * formal adoption by design. Replacing them means editing these two lines.
     */
    --sf-success: #157347;
    --sf-danger: #C82333;

    /*
     * The yellow carries only 1.67:1 against white, so it cannot be text, a
     * border or an icon on a light background. It works as a fill with navy on
     * top, which is what the manual prescribes and what reaches 11.48:1.
     */
    --sf-warning-fill: #FBBF24;

    /*
     * The readable counterpart of the warning colour, for the places where the
     * attention state is a dot, a border or a line of text instead of a filled
     * block. The brand yellow cannot do that job on a light background. Also
     * provisional, pending the same decision as success and error.
     */
    --sf-warning-ink: #B45309;

    /*
     * A state chip states its meaning in words on a tinted ground, so it needs a
     * light background of its own hue instead of the solid fill: the fill is sized
     * for an icon tile, and a small block of text on it reads as a warning label
     * rather than as a word. Each tint was picked so that its own state colour on
     * top clears AA for normal text, which the hand-written greens it replaces did
     * not. Provisional under the same pending decision as success and error.
     */
    --sf-success-soft: #E7F5EE;
    --sf-warning-soft: #FEF6E3;
    --sf-danger-soft: #FBE4E6;

    /*
     * Ground for a block or a chip that carries the brand accent without being
     * an action: a section eyebrow, an informative callout. The manual gives the
     * violet its own light ground and gives the blue none, so this is the blue
     * counterpart of that role. The brand blue on top reaches 5.13:1, which the
     * hand-written light blues it replaces did not. Provisional under the same
     * pending decision as the state colours.
     */
    --sf-blue-bg: #E8EFFF;

    /*
     * The same ground, one step deeper, for when the pointer is over it.
     *
     * The theme took a light button to the solid accent on hover, which turned a
     * secondary action into something that looked like the primary one for as
     * long as the pointer stayed there. This keeps the button the same button and
     * only presses it in, the way the solid one darkens its own blue instead of
     * becoming another colour.
     *
     * It is the last step available: the brand blue on top reaches 4.56:1 and
     * anything deeper falls under the minimum for text. Provisional under the
     * same pending decision as the state colours.
     */
    --sf-blue-bg-hover: #D6E2FF;

    /*
     * Borders, table dividers and muted labels need a grey scale that the brand
     * manual does not provide. These values are inherited from the interface as
     * it stands today and are provisional under the same pending decision as
     * success and error.
     */
    --sf-neutral-900: #181C32;
    --sf-neutral-700: #3F4254;
    --sf-neutral-500: #7E8299;
    --sf-neutral-300: #B5B5C3;
    --sf-neutral-200: #E4E6EF;
    --sf-neutral-100: #F3F6F9;

    /*
     * One family for the whole interface. The two names stay because they are
     * roles and the rest of the system speaks in roles, but they resolve to the
     * same face on purpose: the hierarchy of a screen is carried by weight and by
     * optical size, not by changing typeface between a title and its paragraph.
     * Splitting them again is editing one of these two lines.
     *
     * The fallback stack goes from the closest metric match outwards, so a font
     * that fails to load never leaves a screen unstyled.
     */
    --sf-font-display: 'Roboto Flex', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --sf-font-body: 'Roboto Flex', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/*
 * A card label sized by its own class rather than by its tag.
 *
 * Inside a card header the theme already sizes it, but the same class is also
 * used in plain containers the theme does not reach. There the size came from
 * the tag, so promoting a label to a different heading level changed how big it
 * looked. This rule makes the level a matter of structure and not of appearance.
 */
.card-label {
    font-size: 1.275rem;
    font-weight: 500;
}

/*
 * The title of a dialog, sized by its own class.
 *
 * The theme gives this class a line height and no size, so the size came from the
 * tag. A dialog opens its own outline, so its title is a second-level heading
 * regardless of how deep the screen behind it goes, and this rule keeps that
 * change from making the title of every help window bigger.
 */
.modal-title {
    font-size: 1.25rem;
}