/* Logro brand tokens: THE one place a Logro colour, type size, radius, spacing step or logo
 * rule is defined. Every web surface links this file first (the directory shell, the platform
 * shell, sign-in, the partner setup page and secure links, the files host); the emails mirror
 * its palette (web/email_layout.py, pinned by a test). Change a value here and every surface
 * follows. Nothing else may declare a hex colour for a brand role.
 *
 * Source: the public Provider Directory, the first public Logro platform
 * (docs/reference/logro-brand-guide.md, built from docs/reference/provider-directory-style-guide.md).
 *
 * The roles in one breath:
 *   - Navy (--navy) does the work: primary buttons, selected states, key text.
 *   - Brand blue (--brand-blue) is the one accent: a headline's second line, tinted icon tiles,
 *     the map's recommended pin, quality bands, and (platform, emails, partner pages) underlined
 *     links. The directory's own links stay navy (its guide, 10-15). Never a button fill or a
 *     large area.
 *   - Orange (#f86838) exists in the logo artwork only, "like a badge in the corner". It has no
 *     token on purpose: no page, email or document may paint with it.
 *   - Green means "Accepting new patients" (and a finished, healthy state); red means an error.
 *     Tier colours appear on tier tags only, always beside the tier's words.
 *   - Figtree in three weights (400, 600, 700); nothing under 16px; one type scale.
 *   - 6px corners (4px on tags), flat, no card shadows, no gradients.
 *   - Spacing only from the step scale below.
 *   - The logo sits on one alignment rule: its vertical centre is the centre line of the bar,
 *     heading or band it belongs to, and the text beside it shares that centre line.
 */

/* Figtree, self-hosted (OFL; see static/fonts/Figtree-OFL.txt): a member-facing
 * page must not call a third-party font service. One Latin-subset file per
 * weight. */
@font-face {
    font-family: "Figtree";
    src: url("/static/fonts/figtree-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Figtree";
    src: url("/static/fonts/figtree-latin-500-normal.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Figtree";
    src: url("/static/fonts/figtree-latin-600-normal.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Figtree";
    src: url("/static/fonts/figtree-latin-700-normal.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Surfaces and lines */
    --canvas: #fff; /* the page, panels, header, fields */
    --sub: #f2f4f7; /* grey rows, group headers, tiles, hover wash */
    --select: #eaf0fa; /* a selected row */
    --tile: #e8ecf2; /* a small tag */
    --line: #d3d9e1; /* panel and card border */
    --line-soft: #e1e5eb; /* divider between rows */
    --control: #858fa0; /* control border: 3.3:1 on white */
    --track: #dde1e8; /* the empty part of a quality meter */
    /* Text */
    --ink: #182038; /* headings, key text */
    --body: #1b2330; /* body text */
    --ink-2: #444e62; /* secondary text: 7:1 on white, 6.2:1 on the page grey */
    --ink-3: #565f73; /* muted: only where it measures 4.5:1 or better */
    /* Brand */
    --navy: #182038; /* primary actions, selected states */
    --navy-hover: #2a3553; /* a slightly lighter navy for hover */
    --on-navy-2: #c3c9d6; /* secondary text on navy */
    --brand-blue: #2f6fa8; /* the platform's primary blue, the one accent (5.3:1 on white, 4.8:1 on the page grey, 4.6:1 on --select) */
    --brand-blue-tint: var(--select); /* the soft blue behind an accent icon or chip */
    --pick: var(--ink); /* the map's "Recommended for you" pin: the one dark mark among the coloured tier pins */
    /* Quality colours (docs/reference/provider-directory-style-guide.md, section 5): a better band reads as a
       stronger brand blue, a lower one stays quiet neutral (the --tile / --line tokens), never red, amber or
       orange. The band WORD is always on the chip, so colour only reinforces it. The top band is a solid fill
       with white text (5.3:1) on the card; the next is a tint with a brand-blue border (5.3:1 on white) and dark
       blue text (7.5:1 on the tint). */
    --q-top: var(--brand-blue); /* the top band's fill, and the quality accent on the profile */
    --q-top-on: var(--canvas); /* text and star on the top band's fill */
    --q-high-bg: #dcebf8; /* the next band's tint */
    --q-mid-bg: #f3f8fd; /* the middle band's pale fill (Good quality) */
    --q-mid-line: #9dbfe0; /* and its soft blue outline */
    --q-high-ink: #1c4a78; /* text and star on that tint */
    /* The quality meter's filled segments, one step per band (the same four bands as the chip): Top is the brand
       blue, then two lighter blues, then a neutral slate for Average, so a lower score reads quieter and never
       flattering, and never red or amber. Each is 3:1 or better against the white page; the band word and the
       number sit beside the meter, so colour is never the only signal. */
    --q-mark-high: #4a86bd; /* Very good: 3.9:1 on white */
    --q-mark-mid: #6f94b8; /* Good: 3.2:1 on white */
    --q-mark-low: #848d9c; /* Average: 3.4:1 on white, a plain neutral */
    /* Status: accepting / not accepting new patients, nothing else */
    --green: #1c6b40;
    --green-tint: #e8f5ed;
    --green-line: #c4e3d1;
    --red: #9a2f1c;
    --red-tint: #fcebe7;
    --red-line: #f3cdc4;
    /* Shape (docs/decisions/2026-10-15-directory-visual-pass.md): one radius for every card, panel, sheet,
       field and button, a smaller one for tags. Fully round (50%) is for true circles only. The older names
       below stay so a stylesheet that still uses one lands on the same two values. */
    --radius: 6px;
    --radius-tag: 4px;
    --r: var(--radius); /* panels, cards, dialogs */
    --r-sm: var(--radius); /* controls, buttons, inner boxes */
    --r-xs: var(--radius-tag); /* badges, chips, tags */
    --sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    /* The one type scale (docs/reference/provider-directory-style-guide.md, section 3): every directory
       font declaration names one of these, so no page carries its own size. Nothing is under 16px, and
       there are three weights: 400 to read, 600 for headings, labels, buttons and tags, 700 for the hero
       and the $ marks. */
    --type-hero: 700 44px/52px var(--sans);
    --type-title: 600 28px/36px var(--sans);
    --type-section: 600 22px/30px var(--sans);
    --type-item: 600 20px/28px var(--sans);
    --type-body: 400 18px/28px var(--sans);
    --type-body-strong: 600 18px/28px var(--sans);
    --type-small: 400 16px/24px var(--sans);
    --type-small-strong: 600 16px/24px var(--sans);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-composer: 0 1px 2px rgba(24, 32, 56, 0.05);
    /* The visual pass (2026-10-15): a light grey page, white cards with a visible border, no decorative
       shadow (only a floating layer has one), a tinted secondary button. */
    --page: #f2f4f7; /* the page behind the cards */
    --card-line: #d3d9e1; /* a card's border */
    --shadow-card: none;
    --shadow-card-hover: none;
    --btn-tint: #e6ebf4; /* secondary button fill: a light navy tint, no border */
    --btn-tint-hover: #d9e1ef;
    --highlight: var(--select);
    --r-card: var(--radius); /* cards, panels, sheets */
    --r-field: var(--radius); /* form fields and buttons */
    --r-area: var(--radius); /* a field that can wrap to several lines (the care box) */
    --r-pill: var(--radius); /* toolbar buttons, the search summary (the name is old; nothing is a pill now) */
    --shadow-chip: none;
    --seg-track: #e2e7ef; /* the track of a segmented control; the chosen option is a white cell on it */
    --shadow-float: 0 8px 24px rgba(24, 32, 56, 0.12), 0 2px 6px rgba(24, 32, 56, 0.06);

    /* Tier colours, by tier rank (Tier 1 green, 2 blue, 3 plum, none or unknown slate). Calm hues on purpose
       (Mikl, 2026-10-15): no tier may look like a warning or a tier to avoid, so there is no amber, orange or
       red; the $ signs carry the cost. Each tier tag is a solid block in the tier colour holding white $ signs
       (5.3:1 or better) and a tint flag with dark text (--ink, 13:1 or better on every tint). The solid colour
       measures 4.5:1 or better against its tint and the white card. The word is always on the tag: colour is
       never the only signal. */
    --tier-1: #1b7a43;
    --tier-1-bg: #e3f3ea;
    --tier-2: #1f5fa6;
    --tier-2-bg: #e4eefa;
    --tier-3: #6b47a3;
    --tier-3-bg: #eee8f7;
    --tier-0: #5f6b80;
    --tier-0-bg: #e8ecf2;
}

/* Spacing: the one step scale (guide section 6). Related items sit 8 to 12px apart,
   groups 24 to 32px, sections 48 to 64px. Nothing else. */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Logo rules. The artwork is the one place orange appears. Height is the header-bar size
       (40px; 30px under 600px). Clear space around the logo is its own height divided by two
       on every side. A header or card places the logo so its vertical centre is the bar's
       centre line (align-items: center), and any heading beside it shares that centre line. */
    --logo-h: 40px;
    --logo-h-phone: 30px;
    --logo-clear: calc(var(--logo-h) / 2);
    --logo-max-w: 200px;
    --bar-h: 80px;
    --bar-h-phone: 60px;
}

/* A signed-in member's text size (D-0252). Small is the default scale above; these only
   ever go up, so body text is never under 18px. Declared before the phone block so the
   phone block, which only touches hero, title and section, never shrinks body text. */
:root[data-ma-text="medium"] {
    --type-body: 400 20px/30px var(--sans);
    --type-body-strong: 600 20px/30px var(--sans);
    --type-small: 400 18px/28px var(--sans);
    --type-small-strong: 600 18px/28px var(--sans);
}

:root[data-ma-text="large"] {
    --type-body: 400 22px/32px var(--sans);
    --type-body-strong: 600 22px/32px var(--sans);
    --type-small: 400 20px/30px var(--sans);
    --type-small-strong: 600 20px/30px var(--sans);
}

/* On a tablet the generic "Provider Directory" title gives way too: the Logro logo already says whose page this is,

/* The phone steps of the type scale: only the three largest roles get smaller. */
@media (max-width: 600px) {
    :root {
        --type-hero: 700 34px/42px var(--sans);
        --type-title: 600 26px/34px var(--sans);
        --type-section: 600 20px/28px var(--sans);
        --logo-h: var(--logo-h-phone);
        --bar-h: var(--bar-h-phone);
    }
}