/* ASCOM Design System — shared tokens extracted from the Figma reference. */
:root {
    --ascom-color-navy: #041e42;
    --ascom-color-blue: #0050b5;
    --ascom-color-heading: #003a75;
    --ascom-color-action: #0077fc;
    --ascom-color-cyan: #56b7e6;
    --ascom-color-gold: #c5a059;
    --ascom-color-ink: #131313;
    --ascom-color-muted: #667587;
    --ascom-color-line: #dbe3eb;
    --ascom-color-soft: #f4f7fa;
    --ascom-color-sky: #eaf4fc;
    --ascom-color-navy-deep: #031c37;
    --ascom-color-blue-soft: #b9d3e9;
    --ascom-color-text-soft: #304459;
    --ascom-color-border-strong: #98abc0;
    --ascom-color-gold-soft: #fff9ea;
    --ascom-color-white: #ffffff;
    --ascom-color-success: #138a4b;
    --ascom-color-warning: #8a5a00;
    --ascom-color-error: #9d1c20;
    --ascom-color-focus: #ffbf47;

    --ascom-font-display: "Encode Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ascom-font-body: "Encode Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ascom-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --ascom-space-1: 0.25rem;
    --ascom-space-2: 0.5rem;
    --ascom-space-3: 0.75rem;
    --ascom-space-4: 1rem;
    --ascom-space-5: 1.25rem;
    --ascom-space-6: 1.5rem;
    --ascom-space-8: 2rem;
    --ascom-space-10: 2.5rem;
    --ascom-space-12: 3rem;
    --ascom-space-16: 4rem;

    --ascom-radius-sm: 0.5rem;
    --ascom-radius-md: 1rem;
    --ascom-radius-lg: 1.5rem;
    --ascom-radius-pill: 100px;
    --ascom-shadow-card: 0 18px 50px rgb(4 30 66 / 8%);
    --ascom-container-width: 1680px;
    /* Homepage sections share the same alignment axis on ultrawide screens. */
    --ascom-shell-max-width: var(--ascom-container-width);
    /* Scala viewport condivisa: almeno 16px sui piccoli schermi, crescita
     * proporzionale sui desktop e limite leggibile sui monitor ultrawide. */
    --ascom-layout-gutter: clamp(1rem, 2.35vw, 4rem);
    /* Gutter della shell Figma: header e bussola usano lo stesso asse del
     * contenuto senza diventare full-bleed sui monitor molto larghi. */
    --ascom-shell-gutter: var(--ascom-layout-gutter);

    /* Compatibility aliases used by the existing feature styles. */
    --ascom-navy: var(--ascom-color-navy);
    --ascom-blue: var(--ascom-color-blue);
    --ascom-heading: var(--ascom-color-heading);
    --ascom-action: var(--ascom-color-action);
    --ascom-sky: var(--ascom-color-sky);
    --ascom-paper: var(--ascom-color-soft);
    --ascom-white: var(--ascom-color-white);
    --ascom-ink: var(--ascom-color-ink);
    --ascom-text: var(--ascom-color-ink);
    --ascom-muted: var(--ascom-color-muted);
    --ascom-border: var(--ascom-color-line);
    --ascom-line: var(--ascom-color-line);
    --ascom-gold: var(--ascom-color-gold);
    --ascom-focus: var(--ascom-color-focus);
    --ascom-display: var(--ascom-font-display);
    --ascom-body: var(--ascom-font-body);
    --ascom-container: var(--ascom-container-width);
    --ascom-radius: var(--ascom-radius-sm);
}

body.ascom-prototype-page,
.ascom-beta,
.ascom-workbench,
.ascom-editorial-form-wrap {
    font-family: var(--ascom-font-body);
}