/*
 * Systech Billing design tokens.
 *
 * Copyright (c) 2026 Systech IT Solutions Limited. All rights reserved.
 * CONFIDENTIAL. Internal system. Not for distribution outside Systech IT Solutions.
 *
 * GENERATED FILE. Do not edit by hand.
 * Source of truth: the design canvas working files (lib.mjs LIGHT / DARK).
 * Regenerate with: node export-tokens.mjs <path-to-repo>
 *
 * Structure is Microsoft Fluent 2 (type ramp, spacing, radii, control sizes,
 * focus behaviour), verified against microsoft/fluentui packages/tokens.
 * Colour is Systech, from the brand tokens in PLAN.md Stage 6:
 *   #00233A deep navy   #002F48 navy    #0A5A97 blue    #0B6DB6 bright blue
 *   #5BB1E6 cyan        #00AAC4 teal    #3F4D58 slate
 *   #EEF2F5 / #DFE8EE light surfaces
 *
 * See docs/design/ui-spec.md for how these are used, and for the plain-English
 * wordlist that governs every user-facing string.
 */

:root {
    color-scheme: light;

    --sys-canvas: #eef2f5; /* Page background */
    --sys-surface: #ffffff; /* Cards, tables, panels */
    --sys-subtle: #fafafa; /* Alternate rows, table headers */
    --sys-muted: #dfe8ee; /* Totals rows, meta strips */
    --sys-hover: #f5f5f5; /* Hover on a subtle control */
    --sys-row-hover: #f5f9fc; /* Hover on a table row */

    --sys-fg-1: #242424; /* Primary text */
    --sys-fg-2: #424242; /* Secondary text */
    --sys-fg-3: #616161; /* Meta and helper text */
    --sys-fg-4: #707070; /* Disabled and placeholder text */

    --sys-stroke-1: #d1d1d1; /* Control borders, table header rule */
    --sys-stroke-2: #e0e0e0; /* Row rules, card borders */

    --sys-brand: #0b6db6; /* The one primary action */
    --sys-brand-hover: #0a5a97; /* Primary action, hover */
    --sys-on-brand: #ffffff; /* Text on a brand fill */
    --sys-link: #0a5a97; /* Links */
    --sys-navy: #002f48; /* Systech navy */
    --sys-deep: #00233a; /* Systech deep navy */
    --sys-cyan: #5bb1e6; /* Accent, on navy or dark only */
    --sys-teal: #00aac4; /* Logo mark gradient */
    --sys-slate: #3f4d58; /* Systech slate */

    --sys-chrome: #00233a; /* App header background, navy in both themes */
    --sys-chrome-line: #173f56; /* Dividers inside the header */
    --sys-chrome-fg: #ffffff; /* Header text */
    --sys-chrome-fg-dim: #b7cddc; /* Header secondary text */

    --sys-ok-fg: #0e700e; /* Success text and icon */
    --sys-ok-bg: #f1faf1; /* Success background */
    --sys-ok-border: #9fd89f; /* Success border */
    --sys-on-ok: #ffffff; /* Text on a success fill */
    --sys-warn-fg: #c43501; /* Changed / warning text and icon */
    --sys-warn-bg: #fdf6f3; /* Changed / warning background */
    --sys-warn-border: #f4bfab; /* Changed / warning border */
    --sys-bad-fg: #bc2f32; /* Needs-help text and icon */
    --sys-bad-bg: #fdf6f6; /* Needs-help background */
    --sys-bad-border: #f1bbbc; /* Needs-help border */
    --sys-info-fg: #0a5a97; /* Neutral / informational text and icon */
    --sys-info-bg: #eef6fc; /* Neutral / informational background */
    --sys-info-border: #cfe0ec; /* Neutral / informational border */

    --sys-shadow-2: 0 1px 2px rgba(0,35,58,.14), 0 0 2px rgba(0,35,58,.12); /* Resting card */
    --sys-shadow-4: 0 2px 4px rgba(0,35,58,.14), 0 0 2px rgba(0,35,58,.12); /* Raised control */
    --sys-shadow-8: 0 4px 8px rgba(0,35,58,.14), 0 0 2px rgba(0,35,58,.12); /* Dialog, sign-in card */
    --sys-focus: #000000; /* Focus indicator stroke */

    /* Chart series. Fixed order, never cycled. Validated for colourblind
       separation and contrast against this theme's own surface. */
    --sys-series-1: #0b6db6;
    --sys-series-2: #946200;
    --sys-series-3: #7c3aed;
    --sys-series-4: #127a55;

    /* ---- Structure. Identical in both themes. ---- */

    /* Fluent 2 fontFamilyBase. Segoe UI Variable resolves on Windows; the rest
       of the stack is Fluent's own fallback order. */
    --sys-font: 'Segoe UI Variable Text', 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
    --sys-font-mono: Consolas, 'Courier New', Courier, monospace;

    /* Fluent 2 type ramp: size / line-height. Body is 16/24 rather than
       Fluent's default 14/20, because this is read by finance staff rather
       than by developers scanning a dense grid. */
    --sys-text-caption: 14px;   --sys-line-caption: 20px;
    --sys-text-body: 16px;      --sys-line-body: 24px;
    --sys-text-lead: 18px;      --sys-line-lead: 27px;
    --sys-text-subtitle: 20px;  --sys-line-subtitle: 28px;
    --sys-text-section: 22px;   --sys-line-section: 30px;
    --sys-text-title: 34px;     --sys-line-title: 42px;
    --sys-text-hero: 40px;      --sys-line-hero: 48px;

    /* Fluent 2 corner radii */
    --sys-radius-sm: 2px;
    --sys-radius-md: 4px;
    --sys-radius-lg: 6px;
    --sys-radius-xl: 8px;
    --sys-radius-card: 10px;
    --sys-radius-pill: 9999px;

    /* Fluent 2 spacing */
    --sys-space-xs: 4px;
    --sys-space-s: 8px;
    --sys-space-m: 12px;
    --sys-space-l: 16px;
    --sys-space-xl: 20px;
    --sys-space-xxl: 24px;
    --sys-space-xxxl: 32px;

    /* Control heights. Larger than Fluent's 32px default, for the same reason
       the body type is larger. */
    --sys-control-h: 44px;
    --sys-control-h-primary: 52px;

    background-color: var(--sys-canvas);
}

/*
 * Dark theme. Selected, not an automatic inversion: surfaces are built from
 * Systech navy rather than neutral grey, and the brand fill is lifted because
 * #0B6DB6 against the dark card reaches only 2.68:1,
 * under the 3:1 a control edge needs. The lifted #2e8fd4 reaches 4.15:1,
 * and carries navy text rather than white.
 */
:root[data-theme='dark'] {
    color-scheme: dark;

    --sys-canvas: #04121a; /* Page background */
    --sys-surface: #0e2c3d; /* Cards, tables, panels */
    --sys-subtle: #123549; /* Alternate rows, table headers */
    --sys-muted: #1a4560; /* Totals rows, meta strips */
    --sys-hover: #1a4560; /* Hover on a subtle control */
    --sys-row-hover: #123549; /* Hover on a table row */

    --sys-fg-1: #f3f9fc; /* Primary text */
    --sys-fg-2: #c9dce7; /* Secondary text */
    --sys-fg-3: #a2bccc; /* Meta and helper text */
    --sys-fg-4: #8aa7b9; /* Disabled and placeholder text */

    --sys-stroke-1: #35617c; /* Control borders, table header rule */
    --sys-stroke-2: #23495f; /* Row rules, card borders */

    --sys-brand: #2e8fd4; /* The one primary action */
    --sys-brand-hover: #5bb1e6; /* Primary action, hover */
    --sys-on-brand: #00233a; /* Text on a brand fill */
    --sys-link: #5bb1e6; /* Links */
    --sys-navy: #002f48; /* Systech navy */
    --sys-deep: #00233a; /* Systech deep navy */
    --sys-cyan: #5bb1e6; /* Accent, on navy or dark only */
    --sys-teal: #00aac4; /* Logo mark gradient */
    --sys-slate: #8aa7b9; /* Systech slate */

    --sys-chrome: #00233a; /* App header background, navy in both themes */
    --sys-chrome-line: #173f56; /* Dividers inside the header */
    --sys-chrome-fg: #ffffff; /* Header text */
    --sys-chrome-fg-dim: #b7cddc; /* Header secondary text */

    --sys-ok-fg: #9fd89f; /* Success text and icon */
    --sys-ok-bg: #0b2a11; /* Success background */
    --sys-ok-border: #218c21; /* Success border */
    --sys-on-ok: #0b2a11; /* Text on a success fill */
    --sys-warn-fg: #f4bfab; /* Changed / warning text and icon */
    --sys-warn-bg: #2e1508; /* Changed / warning background */
    --sys-warn-border: #de501c; /* Changed / warning border */
    --sys-bad-fg: #f1bbbc; /* Needs-help text and icon */
    --sys-bad-bg: #2e1113; /* Needs-help background */
    --sys-bad-border: #d7494c; /* Needs-help border */
    --sys-info-fg: #5bb1e6; /* Neutral / informational text and icon */
    --sys-info-bg: #0a2b40; /* Neutral / informational background */
    --sys-info-border: #0b6db6; /* Neutral / informational border */

    --sys-shadow-2: 0 1px 2px rgba(0,0,0,.28), 0 0 2px rgba(0,0,0,.24); /* Resting card */
    --sys-shadow-4: 0 2px 4px rgba(0,0,0,.28), 0 0 2px rgba(0,0,0,.24); /* Raised control */
    --sys-shadow-8: 0 4px 8px rgba(0,0,0,.28), 0 0 2px rgba(0,0,0,.24); /* Dialog, sign-in card */
    --sys-focus: #ffffff; /* Focus indicator stroke */

    /* Chart series. Fixed order, never cycled. Validated for colourblind
       separation and contrast against this theme's own surface. */
    --sys-series-1: #3589cc;
    --sys-series-2: #bd8a28;
    --sys-series-3: #9a6ce2;
    --sys-series-4: #1f9d70;
}

/* Respect the operating system on first visit, before a choice is stored. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        color-scheme: dark;

        --sys-canvas: #04121a; /* Page background */
        --sys-surface: #0e2c3d; /* Cards, tables, panels */
        --sys-subtle: #123549; /* Alternate rows, table headers */
        --sys-muted: #1a4560; /* Totals rows, meta strips */
        --sys-hover: #1a4560; /* Hover on a subtle control */
        --sys-row-hover: #123549; /* Hover on a table row */

        --sys-fg-1: #f3f9fc; /* Primary text */
        --sys-fg-2: #c9dce7; /* Secondary text */
        --sys-fg-3: #a2bccc; /* Meta and helper text */
        --sys-fg-4: #8aa7b9; /* Disabled and placeholder text */

        --sys-stroke-1: #35617c; /* Control borders, table header rule */
        --sys-stroke-2: #23495f; /* Row rules, card borders */

        --sys-brand: #2e8fd4; /* The one primary action */
        --sys-brand-hover: #5bb1e6; /* Primary action, hover */
        --sys-on-brand: #00233a; /* Text on a brand fill */
        --sys-link: #5bb1e6; /* Links */
        --sys-navy: #002f48; /* Systech navy */
        --sys-deep: #00233a; /* Systech deep navy */
        --sys-cyan: #5bb1e6; /* Accent, on navy or dark only */
        --sys-teal: #00aac4; /* Logo mark gradient */
        --sys-slate: #8aa7b9; /* Systech slate */

        --sys-chrome: #00233a; /* App header background, navy in both themes */
        --sys-chrome-line: #173f56; /* Dividers inside the header */
        --sys-chrome-fg: #ffffff; /* Header text */
        --sys-chrome-fg-dim: #b7cddc; /* Header secondary text */

        --sys-ok-fg: #9fd89f; /* Success text and icon */
        --sys-ok-bg: #0b2a11; /* Success background */
        --sys-ok-border: #218c21; /* Success border */
        --sys-on-ok: #0b2a11; /* Text on a success fill */
        --sys-warn-fg: #f4bfab; /* Changed / warning text and icon */
        --sys-warn-bg: #2e1508; /* Changed / warning background */
        --sys-warn-border: #de501c; /* Changed / warning border */
        --sys-bad-fg: #f1bbbc; /* Needs-help text and icon */
        --sys-bad-bg: #2e1113; /* Needs-help background */
        --sys-bad-border: #d7494c; /* Needs-help border */
        --sys-info-fg: #5bb1e6; /* Neutral / informational text and icon */
        --sys-info-bg: #0a2b40; /* Neutral / informational background */
        --sys-info-border: #0b6db6; /* Neutral / informational border */

        --sys-shadow-2: 0 1px 2px rgba(0,0,0,.28), 0 0 2px rgba(0,0,0,.24); /* Resting card */
        --sys-shadow-4: 0 2px 4px rgba(0,0,0,.28), 0 0 2px rgba(0,0,0,.24); /* Raised control */
        --sys-shadow-8: 0 4px 8px rgba(0,0,0,.28), 0 0 2px rgba(0,0,0,.24); /* Dialog, sign-in card */
        --sys-focus: #ffffff; /* Focus indicator stroke */

        /* Chart series. Fixed order, never cycled. Validated for colourblind
           separation and contrast against this theme's own surface. */
        --sys-series-1: #3589cc;
        --sys-series-2: #bd8a28;
        --sys-series-3: #9a6ce2;
        --sys-series-4: #1f9d70;
    }
}

/*
 * Focus. Fluent's two-tone indicator: a 2px stroke over a 1px ring in the
 * opposite tone, so it stays visible on every surface. Keyboard only.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--sys-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--sys-surface);
}

/* Money and any figure read in a column. */
.sys-num {
    font-variant-numeric: tabular-nums;
}