/*
 * Heatrail partner portal: the token layer.
 * ---------------------------------------------------------------------------
 * ONE SOURCE FOR EVERY COLOUR, SIZE AND FACE. public/css/portal.css defines no
 * colour of its own and the views never invent one: every heat, band, outcome
 * and graph glyph resolves to a token here.
 *
 * THE SYSTEM IS THE PUBLIC SITE'S. Martin's decision of 2026-09-03: the whole
 * product wears the homepage's look. White ground, deep navy text, one warm
 * gradient, Inter everywhere, IBM Plex Mono only where digits are compared,
 * 12px radii, two shadow steps. The block below is the homepage's token block
 * (apps/landing/src/styles.css chapter 1) with the portal's own semantics
 * added under it.
 *
 * LIGHT ONLY, ON PURPOSE (Martin, 2026-09-04). No prefers-color-scheme block:
 * registration, the partner portal and the operator console are one light
 * product, and the published contracts (public/css/legal.css) were already
 * committed to light so that a printed contract matches the screen.
 *
 * HEAT AND STATUS ARE SEMANTICS, NOT DECORATION. --heat-high means score 70 or
 * above, or heat from the network or another merchant. --heat-medium means
 * score 40 to 69, or heat from this shop's own labels. --heat-neutral means
 * neither. Identical meanings to the operator console.
 *
 * THE VALUES CHANGED ON 2026-09-04, AND THEY WERE CALCULATED, NOT PICKED. The
 * old palette was built for a dark ground and fails on a light one: #f87171
 * measures 2.77:1 on white and #fbbf24 measures 1.67:1, against the 4.5:1 AA
 * floor for text. Every replacement below carries its measured ratio, first
 * against --paper and then against the wash a badge actually sits on. If you
 * change one, measure it again. Do not choose by eye.
 */

/* Self-hosted so the strict CSP holds unchanged: App\Http\Middleware\
   SecurityHeaders ships style-src 'self'; font-src 'self' with no
   'unsafe-inline', and the portal adds no third party to its privacy notice.
   Both families are SIL OFL 1.1; the licences sit beside the files. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;

    /* --- Ground and ink -------------------------------------------------- */
    --paper: #ffffff;          /* page ground */
    --surface: #ffffff;        /* raised panels */
    --surface-sunk: #f6f9fc;   /* wells, table heads, code blocks */
    --ink: #0a2540;            /* primary text, 15.9:1 on paper */
    --ink-muted: #425466;      /* secondary text, 8.6:1 */
    --ink-faint: #5c6b7a;      /* labels and captions, 5.5:1 */
    --rule: #e6ebf1;           /* hairlines */
    --rule-strong: #cfd7e0;
    --accent: #c4380e;         /* heat, 5.4:1 on paper, safe for text */
    --accent-strong: #9e2c0b;  /* hover and pressed */
    --accent-wash: #fdf1ec;
    --on-accent: #ffffff;      /* 5.4:1 on --accent */
    --focus: #0b5cd6;          /* links and focus rings, 6.0:1 on paper */
    --focus-ring: rgba(11, 92, 214, 0.14);  /* the soft halo on a focused field */

    /* One gradient, for the masthead and nothing else. Never behind small
       text: it is the surface a visitor recognises from heatrail.eu. */
    --band: linear-gradient(115deg, #fff5ef 0%, #ffe8dd 26%, #fbdcea 58%, #e7e4fb 100%);

    /* Two elevation steps. A third invites decoration. */
    --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06), 0 1px 3px rgba(10, 37, 64, 0.05);
    --shadow-md: 0 4px 6px rgba(10, 37, 64, 0.04), 0 12px 28px rgba(10, 37, 64, 0.08);

    /* --- Type ------------------------------------------------------------- */
    --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* The portal reads denser than the marketing site: an operator scans it
       for minutes at a time, so the base step is 15px rather than 17px. */
    --step--2: 0.75rem;
    --step--1: 0.8125rem;
    --step-0: 0.9375rem;
    --step-1: 1.0625rem;
    --step-2: 1.25rem;
    --step-3: 1.5rem;
    --step-4: 1.875rem;

    --leading-tight: 1.15;
    --leading-body: 1.55;

    /* --- Space, a 4px-rooted scale ---------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;

    /* --- Radius ------------------------------------------------------------ */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* --- Heat and score semantics ------------------------------------------ */
    --heat-high: #b42318;            /* score 70+, heat other or network. 6.6:1 white, 6.1:1 on wash */
    --heat-high-bg: #fef3f2;
    --heat-high-line: #f5b5ae;       /* 1px border, non-text */
    --heat-medium: #b54708;          /* score 40 to 69, heat own. 5.4:1 white, 5.2:1 on wash */
    --heat-medium-bg: #fffaeb;
    --heat-medium-line: #f3c98b;
    --heat-neutral: #5c6b7a;         /* score under 40, no heat, unknown. 5.5:1 white */
    --heat-neutral-bg: #f6f9fc;
    --heat-neutral-line: #cfd7e0;

    /* --- Outcome ------------------------------------------------------------ */
    --ok: #067647;                   /* 5.7:1 white, 5.4:1 on wash */
    --ok-bg: #ecfdf3;
    --ok-line: #85d3ac;

    /* --- Case status, the same three meanings ------------------------------- */
    --status-pending: #b54708;       /* registered, evidence not yet attached */
    --status-active: #b42318;        /* confirmed label, contributes heat */
    --status-withdrawn: #5c6b7a;     /* withdrawn, contributes no heat */

    /* --- Connections graph --------------------------------------------------
     * Drawn on canvas, so public/js/connections.js reads these too. Node fills
     * are non-text and hold the 3:1 floor for meaningful graphics; the label
     * colour is text and holds 4.5:1.                                        */
    --graph-order: #0b5cd6;          /* order node without heat, 6.0:1 */
    --graph-edge: #cfd7e0;
    --graph-edge-other: #8794a5;     /* dashed edge to the other-merchants glyph, 3.3:1 */
    --graph-glyph: #e6ebf1;
    --graph-label: #0a2540;
    --graph-canvas: #f6f9fc;

    /* --- Sparkline and pipeline ---------------------------------------------- */
    --spark-line: #c4380e;
    --spark-area: rgba(196, 56, 14, 0.10);
    --pipe-bar: #c4380e;
    --pipe-track: #e6ebf1;
}