/*
 * Capture design tokens, derived from the vendored AlisQI main-app variables
 * (assets/styles/alisqi/src/layout/variables.css). Colours there are "r, g, b" triplets used as rgb(var(--x)).
 * Nothing is invented: every value maps to a main-app token, see docs/styling-inventory.md.
 *
 * The main app switches its semantic colour tokens (--background-*, --textcolor-*, --border-*, --icon*) for dark
 * mode on `body` via prefers-color-scheme, so everything below follows the system theme automatically.
 */
body {
    /* Surfaces */
    --capture-color-bg: rgb(var(--background-main));
    --capture-color-surface: rgb(var(--background-upper));
    --capture-color-border: rgb(var(--border-soft));
    --capture-color-border-hard: rgb(var(--border-hard));

    /* Text */
    --capture-color-text: rgb(var(--textcolor-main));
    --capture-color-text-secondary: rgb(var(--textcolor-secondary));
    --capture-color-heading: rgb(var(--textcolor-heading));
    --capture-color-link: rgb(var(--textcolor-link));

    /* App chrome: the main app's navigation bar colours */
    --capture-color-bar: rgb(var(--background-navbar));
    --capture-color-on-bar: rgb(var(--textcolor-navbar-link));
    --capture-color-accent: rgb(var(--icon));

    /* Type, spacing and radius */
    --capture-font-family: "Lato", "Poppins", sans-serif; /* as the main app body */
    --capture-font-size-input: max(16px, 1rem); /* 16px minimum stops iOS zooming into inputs (§11.3) */
    --capture-tap-target: var(--minimum-tap-target-size); /* 44px */
    --capture-gutter: var(--spacing-medium-large); /* 16px */
    --capture-radius: var(--border-radius-small);
    --capture-app-bar-height: 56px;
    --capture-tab-bar-height: 56px;
}