/*
 * Design tokens — design system "Signal" (claude.ai artifact «НЗ — Signal design system»).
 * Every color, font, size, spacing and border lives here. Components (app.css) use only these variables.
 *
 * Per brand only --accent changes. Any replacement must keep 4.5:1 contrast with --ink,
 * because text on accent is always ink.
 */

/* Archivo, self-hosted (no requests to Google). Variable: weight 100–900, width 62–125%. SIL OFL, see ../fonts/OFL.txt. */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    src: url("../fonts/archivo-latin-ext-iEdfVTB.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    src: url("../fonts/archivo-latin-Wa7z_Iw.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Colors */
    --ink: #111111;
    --paper: #ffffff;
    --ground: #f2f2ee;
    --accent: #ffd400;
    --on-accent: var(--ink);
    --muted: #4a4a45;
    --muted-on-ink: #d4d4cf;
    --hairline: #d9d9d3;
    --focus: #0b57d0;
    --error: #b3261e;

    /* Typography */
    --font-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
    --font-body: 'Archivo', Arial, sans-serif;
    --display-stretch: 68%;

    --size-display-xl: 88px;
    --size-display-xl-mobile: 52px;
    --size-display-l: 56px;
    --size-display-l-mobile: 40px;
    --size-display-m: 30px;
    --size-numeral: 84px;
    --size-body-l: 21px;
    --size-body: 18px;
    --size-body-mobile: 17px;
    --size-body-s: 15px;
    --size-label: 13px;

    --leading-display: 0.92;
    --leading-tight: 1.2;
    --leading-body: 1.5;
    --tracking-label: 0.12em;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Layout */
    --container-max-width: 1200px;
    --text-max-width: 34em;
    --form-max-width: 640px;
    --header-height: 72px;
    --target-min: 44px;
    --button-min: 48px;

    /* Shape */
    --radius-none: 0;
    --border-hairline: 1px;
    --border-control: 2px;
    --border-frame: 3px;
    --border-signal: 4px;
    --focus-ring: 3px;
}