/*
 * Design tokens.
 *
 * Every value here was measured from the interface this product replaces and
 * then, where it failed WCAG 2.2 AA, recomputed: hue and saturation kept,
 * lightness lowered by the smallest amount that clears the threshold. The
 * measured table is the authority, and a check re-reads it against this file so
 * that a value transcribed from memory cannot survive.
 *
 * Nothing here lays anything out. These are named values and one default; rules
 * that position or decorate a component belong with that component.
 *
 * Written entirely in logical properties. The product is international, and a
 * stylesheet that says "left" has already decided that the reader is not
 * reading right to left.
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 * Copyright (C) 2026 Astral Internet inc.
 */

:root {
    /* ---- Typography -------------------------------------------------- */

    --font-text: "Sintony", sans-serif;
    --font-heading: "Sintony", sans-serif;
    --font-heading-weight: 700;

    --size-base: 13px;
    --size-form: 16px;
    --size-visitor-title: 22px;
    --size-subtitle: 18px;
    --size-embed-banner: 18px;
    --size-timestamp: 10px;
    --size-message-title: 14px;
    --weight-message-title: 700;

    /* ---- Surfaces ---------------------------------------------------- */

    --surface: #FFFFFF;
    --surface-alt: #F0F0F2;
    --ground: #F2F2F2;
    --border: #E3E3E3;

    /*
     * The boundary of a control, which is a different job from the hairline
     * above and had been doing it in the same colour.
     *
     * WCAG 2.2 holds the visual information that identifies a control to three
     * to one. An unfilled control -- a text field, a secondary button -- is
     * identified by nothing but its edge: its fill is `--surface` and the band
     * behind it is `--surface` or `--surface-alt`, which differ by 1.11, so the
     * edge is the whole of what says a control is there. At `--border` that
     * edge measures 1.28 against white, and a reader with low vision is looking
     * at a page where the reply box is not visibly a box.
     *
     * Neutral grey, exactly as the hairline is, because the hairline has no hue
     * to preserve -- 34.8 per cent of lightness is a large step and none of it
     * moves the colour off the axis the interface was measured on. It clears
     * 3.45 against `--surface` and 3.03 against `--surface-alt`, which are the
     * two grounds a control is drawn on in this product.
     *
     * `--border` stays where it is and keeps its value, because what it does
     * everywhere else -- a rule between two rows, the edge of a card, a dashed
     * drop zone -- is decoration, and decoration owes no ratio. The two tokens
     * exist so that the question "is this edge load-bearing" is answered where
     * the edge is drawn rather than argued again each time.
     *
     * Applied on the visitor surface. The console and the administration draw
     * their controls on `--border` still; that is recorded in
     * docs/04-accessibility.md as an open item with an owner and a date, and
     * closing it is one substitution per rule.
     */
    --control-edge: #8A8A8A;

    /*
     * The brand fill never carries body text and is never used as a text
     * colour. Text uses --accent-text. Both tokens exist so that confusing the
     * two is not possible, because white on the fill measures 3.04:1 and fails.
     */
    --brand-fill: #EF6C45;
    --brand-fill-hover: #F28666;
    --on-brand: #262829;
    --brand-edge: #D84013;

    --accent-text: #D84013;
    --accent-text-hover: #BC3811;

    --link: #67769B;
    --footer: #32404E;

    /* ---- Presence ---------------------------------------------------- */

    /* Backgrounds only. Neither is legible as a text colour. */
    --online: #C2FF91;
    --offline: #FFC4BC;

    /* ---- Conversation lines ------------------------------------------ */

    --msg-operator: #1A890A;
    --msg-visitor: #2F2F2F;

    --msg-system-bg: #F0F0F2;
    --msg-system-text: #505769;

    --msg-alert-bg: #FBF7B4;
    --msg-alert-text: #806732;

    --msg-notice-bg: #EBF7DD;
    --msg-notice-text: #284307;

    /* ---- Switchboard tabs -------------------------------------------- */

    --tab-idle-bg: #F0F0F2;
    --tab-idle-border: #D3D3D3;
    --tab-idle-text: #616D8B;

    --tab-focus-bg: #FFFFFF;
    --tab-focus-border: #B4BAC2;

    /* Backgrounds for the blinking states; their label is --on-brand. */
    --tab-blink-red: #FF7676;
    --tab-blink-green: #17C61B;

    /* ---- Text -------------------------------------------------------- */

    --text: #4D4D4D;
    --heading: #262829;

    /* ---- Geometry ---------------------------------------------------- */

    /*
     * Square corners are an identity trait rather than an omission. The one
     * exception is the embedded window, whose corner is an administrator
     * setting, which is why it has a token of its own.
     */
    --radius: 0;
    --embed-radius: 10px;

    --popup-width: 540px;
    --popup-height: 580px;

    --embed-width: 415px;
    --embed-height: 600px;
    --embed-margin-block-end: 20px;

    --open-animation-duration: 400ms;

    /*
     * The smallest a control may be, and the ring that says which one has the
     * keyboard. Both are here rather than in the sheet that draws a control,
     * because the alternative is what the two console sheets already show: the
     * same ring written out three times, at two different offsets, and no way
     * to tell which of the three was the decision.
     *
     * Twenty-four is not a taste. It is the floor WCAG 2.2 sets for a pointer
     * target, and a control under it is one a reader with an unsteady hand
     * misses -- silently, because a miss looks exactly like not having tried.
     */
    --target-size: 24px;

    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
}

/*
 * The default the identity depends on. Stated once here rather than repeated
 * as a reset in every component, and overridden only by the embedded window.
 */
*,
*::before,
*::after {
    border-radius: var(--radius);
}