/* Skin tokens, hand-maintained.
 *
 * flow-tokens.css carries Flow's full token set (colours, semantic roles and
 * component tokens) and is generated by `make flow-tokens`; this file is not.
 * mittwald.css reaches for the Flow tokens directly — a button is
 * --button--primary-solid-background-color--default, an input border is
 * --form-control--border-color--default. Flow names: see flow-tokens.css or
 * https://flow.mittwald.de.
 *
 * What is left here is what Flow has no token for: Roundcube's own chrome —
 * sidebar, toolbar, lists, menus — plus a few skin values. Everything carries
 * a --skin-- prefix, so a name here can never collide with a Flow name.
 */
:root {
    --skin--surface--default: var(--neutral--color--100);
    --skin--surface--sunken: var(--neutral--color--200);
    --skin--surface--hover: var(--neutral--color--200);
    --skin--surface--active: var(--neutral--color--300);

    --skin--highlight-bar: var(--neutral--color--600);
    --skin--divider: #D4DBDE;

    /* The badge accents are mittwald navy, not Flow's primary blue. */
    --skin--brand: var(--color--mittwald-navy--1000);

    /* Flow rings focus in primary; on elastic's coloured chrome the neutral
       ring reads better. */
    --skin--focus-ring: 0 0 0 .2rem var(--neutral--color--600);
    --skin--focus-ring--border-color: var(--neutral--color--700);

    /* Login page: the page itself uses Flow's --color--background-gradient;
       this is the colour that gradient ends on, so the imprint strip below the
       fold continues it. Flow has no token for the stop on its own. */
    --skin--background-gradient-end: rgba(208, 214, 243, 1);

    /* Flow sizes headings in rem against a 16px root; elastic's root is 14px,
       so Flow's --font-size-heading--s is spelled in px here. */
    --skin--accent-box-heading-font-size: 18px;
}