/* ============================================================================
   TrafficPortal3 design tokens
   ----------------------------------------------------------------------------
   Named values (CSS custom properties) for the things that should never disagree
   between pages: brand colour, text/surface colours, borders, radius, type.

   Scope: VALUES ONLY. No component or layout rules live here — a page still owns
   how its own tables, cards and panels are built. This file only says what "our
   blue" is, so pages don't each re-type a hex.

   TP3 owns this file. It is deliberately NOT shared with AdvPortal3, which is a
   different product with its own brand (PayNow purple) and its own token file.
   Matching the file's shape across the two apps is fine; sharing the values is not.

   Seeded from the Payment History redesign, which is the look new pages follow as
   the remaining TP2 iframe pages are converted. Existing legacy pages are not
   retrofitted — they keep their own hard-coded values until they're rewritten.
   ============================================================================ */

:root {
    /* ---- Brand ---- */
    --tp-brand: #1475BA;          /* primary brand blue - the app's dominant accent */
    --tp-brand-dark: #0f5c93;     /* hover / pressed / stronger emphasis */
    --tp-brand-tint: #E3F5FE;     /* pale fill behind brand-coloured elements */
    --tp-brand-tint-2: #C4E8F7;   /* second step for hover over a tinted surface */

    /* ---- Text ---- */
    --tp-ink: #1f2d3a;            /* body text */
    --tp-ink-soft: #5f7183;       /* secondary / muted text, labels, hints */

    /* ---- Surfaces & lines ---- */
    --tp-card: #ffffff;           /* card / panel background */
    --tp-line: #e5eaf1;           /* standard border */
    --tp-line-soft: #eef2f6;      /* lighter divider, e.g. between table rows */

    /* ---- Status ---- */
    --tp-danger: #B00020;         /* errors, destructive actions, validation */

    /* ---- Shape ---- */
    /* 4px is the app's de-facto radius (by far the most common value in use).
       Buttons, inputs and small controls should consume this rather than typing
       a number, which is how 5px/6px/7px/8px crept in across the older pages. */
    --tp-radius: 4px;
    --tp-radius-card: 14px;       /* larger radius for cards and panels */

    --tp-shadow: 0 1px 2px rgba(16, 42, 67, .04), 0 8px 24px rgba(16, 42, 67, .06);

    /* ---- Type ---- */
    --tp-font-family: system-ui, "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}