/* Every colour, size and layer in Zuko (docs/design/03-design-system.md). Custom properties only. */
:root {
    --surface: #FFFFFF;
    --page: #F3F7F8;
    --sunken: #EBF0F2;
    --ink: #15181B;
    --ink-2: #5B6570;
    --ink-3: #687280;
    --line: #DFE3E7;
    --line-soft: #ECEEF0;
    --line-strong: #C6CCD2;
    --accent: #0A7D93;
    --accent-hover: #086A7D;
    --accent-wash: #E2F3F6;
    --accent-tint: #CDEAF0;
    /* Accent text on --accent-wash or --page (--accent on the wash is 4.2:1). */
    --accent-ink: #086A7D;
    --sap-filled-fill: #EEF6F8;     /* a field SAP filled in (Add contact) */
    --danger: #B42318;
    --danger-hover: #8F1C13;
    /* A neutral chip's fill (a value, a timeline kind, a sort), a table head's, a disabled button's. */
    --fill-muted: #F2F4F6;
    --table-head: #FBFCFC;
    --fill-disabled: #E5E7EB;
    /* The selection chip's dividers (Forage-PO-Desk). */
    --accent-divider: #B9D3DB;
    /* SAP company dots (apps/sap/company_dots.py). */
    --sap-crm: #D92D20;
    --sap-foran: #F79009;
    --sap-cdm: #8A939D;

    --rail: #E1F1F4;
    --rail-line: #CFE6EB;
    --rail-ink: #2F3B45;
    --rail-active: var(--accent);
    --tab-ink: #6B7580;    /* the phone tab bar's other tabs */

    --tone-draft-ink: #5B6570;
    --tone-draft-fill: transparent;
    --tone-pending-ink: #92400E;
    --tone-pending-fill: #FDF1DF;
    --tone-pending-line: #F5D9A8;   /* an amber banner's edge */
    --tone-inflight-ink: #3730A3;
    --tone-inflight-fill: #EBEDFC;
    --tone-done-ink: #166534;
    --tone-done-fill: #E4F4E9;
    --tone-refused-ink: #B42318;
    --tone-refused-fill: #FBEAE8;
    /* A refused banner's edge, and a refused pill raised on that banner (Pipeline-Close-Desk-2). */
    --tone-refused-line: #F3C9C4;
    --tone-refused-raised: #FEE4E2;
    --tone-failed-ink: #FFFFFF;
    --tone-failed-fill: #B42318;
    --tone-closed-ink: #475569;
    --tone-closed-fill: #EEF1F4;

    /* Categorical slots in this fixed order (03 "Chart palette"); users and groups take them in
       legend order, repeating past eight. */
    --chart-1: #0A8AA0;
    --chart-2: #C2410C;
    --chart-3: #7C3AED;
    --chart-4: #B7791F;
    --chart-5: #DB2777;
    --chart-6: #2563EB;
    --chart-7: #4D7C0F;
    --chart-8: #9D174D;
    /* Outcomes in a chart or a meter: the state tones' inks (03 "Outcomes and progress"). */
    --outcome-done: #15803D;
    --outcome-pending: #B45309;
    --outcome-refused: #B42318;
    --outcome-closed: #8A939D;
    /* Progress, one hue from to come to done (03 "Outcomes and progress"). */
    --progress-1: #C6CCD2;
    --progress-2: #6FB3C3;
    --progress-3: #0A7D93;
    /* The A4 report sheet (10-forage.md "The shared A4 sheet"): a page's physical sizes, the same
       on screen and paper. A phone's screen raises the type (components.css "Report sheet"). */
    --sheet-width: 210mm;
    --sheet-margin: 12mm;
    --sheet-size-title: 22px;
    --sheet-size-heading: 13.5px;
    --sheet-size-label: 11.5px;
    --sheet-size-body: 11px;
    --sheet-size-small: 10px;
    --sheet-size-fine: 9.5px;
    --sheet-logo-h: 64px;
    --sheet-band-h: 83px;
    --sheet-icon: #B2B3B6;
    --sheet-text: #3A434C;
    --sheet-zone: #BFDCC9;
    /* Initials avatars: fill / ink, one pair per person by a hash of their initials
       (display_tags.avatar_tone, select2_pickers.js avatarTone). */
    --avatar-1-fill: #FDE7D9;
    --avatar-1-ink: #9A3412;
    --avatar-2-fill: #E0E7FF;
    --avatar-2-ink: #3730A3;
    --avatar-3-fill: #DCFCE7;
    --avatar-3-ink: #166534;
    --avatar-4-fill: #FCE7F3;
    --avatar-4-ink: #9D174D;
    --avatar-5-fill: #E0F2FE;
    --avatar-5-ink: #075985;
    --avatar-6-fill: #FEF3C7;
    --avatar-6-ink: #92400E;
    --avatar-7-fill: #EDE9FE;
    --avatar-7-ink: #5B21B6;
    --avatar-8-fill: #CCFBF1;
    --avatar-8-ink: #115E59;
    /* The device's own position on a map. */
    --here: #2563EB;
    --here-halo: rgba(37, 99, 235, .2);
    /* An absence on the calendar: Outlook's out-of-office purple. */
    --calendar-oof: #7A3D8F;
    /* Your own events, on the Calendar grid and every event chip (scheme B's event blue). */
    --calendar-self: #2563EB;

    --font-sans: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-display: 700 1.75rem/2rem var(--font-sans);
    --text-heading: 600 1.375rem/1.75rem var(--font-sans);
    /* A record's name on a wide page; a phone keeps --text-heading at 700. */
    --text-title: 700 1.625rem/2rem var(--font-sans);
    --title-tracking: -0.01em;
    --text-section: 600 1.125rem/1.5rem var(--font-sans);
    --text-body: 400 0.9375rem/1.375rem var(--font-sans);
    --text-small: 400 0.8125rem/1.125rem var(--font-sans);
    --text-micro: 700 0.6875rem/1rem var(--font-sans);
    --micro-tracking: 0.07em;

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

    --radius-control: 6px;
    --radius-card: 10px;
    --radius-pill: 999px;

    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);

    /* On Bootstrap's scale: its modal is 1055 and today's page layers (Leaflet, toolbars) sit near 1000. */
    --z-sticky: 1035;
    --z-dropdown: 1040;
    --z-overlay: 1055;
    --z-toast: 1090;

    --control-h: 44px;
    --control-font: 1rem;
    --rail-w: 200px;
    --rail-w-compact: 68px;
    --queue-list-w: 330px;
    --topbar-h: 48px;
    --tabbar-h: 56px;
}

@media (pointer: fine) {
    :root {
        --control-h: 36px;
        --control-font: 0.875rem;
    }
}