/*
    Design tokens for the Mobile app.
    Single source of truth for colour, spacing, radius and type scale.
    Loaded after CellPhone.css and before ../Custom.css so a tenant's
    Custom.css can still override any token for white-labelling, e.g.:

        :root { --brand: #C8102E; --radius: 4px; }
*/
:root {
    /* Brand */
    --brand: #1976D2;
    --brand-hover: #1669bb;
    --brand-ink: #0C447C;

    /* Second accent - was the hardcoded rgb(65,97,158) navy used for
       section/list headers (BlueListItemHeader, SelectedAnswer, dialog
       titlebars). Kept distinct from --brand since they read as two
       different roles in the existing UI (action vs. section heading). */
    --accent-2: #41619E;
    --accent-2-ink: #2C4270;

    /* Status colours (kept in sync with Colours.css) */
    --ok: #2E7D32;
    --warn: #F9A825;
    --danger: #D64545;
    --danger-hover: #c23a3a;

    /* Solid button fills (AddButton/CancelButton). Separate from --brand/
       --danger above so Dark.css can darken just these without also
       dimming header icons and section-header bars, which already read
       fine on a dark background and use --brand/--danger directly. */
    --btn-add-bg: var(--brand);
    --btn-add-bg-hover: var(--brand-hover);
    --btn-cancel-bg: var(--danger);
    --btn-cancel-bg-hover: var(--danger-hover);

    /* Surfaces */
    --page-bg: #ECEEF1;
    --surface: #FFFFFF;
    --surface-2: #F4F5F7;
    --border: #E3E5E9;
    --border-strong: #C9CCD1;

    /* Text */
    --text: #1A1A1A;
    --text-muted: #5F6368;
    --text-on-brand: #FFFFFF;

    /* Radius */
    --radius: 10px;
    --radius-sm: 6px;
    --radius-pill: 20px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;

    /* Elevation */
    --elev-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.10);

    /* Type */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
    --type-sm: 13px;
    --type-base: 15px;
    --type-lg: 18px;
    --type-xl: 22px;
}