/* venv.css — authoritative theme tokens + self-hosted Roboto */
/* LiveTick brand reskin (livetick.com.au): gold accent / navy anchor / off-white field */

/* SELF-HOSTED ROBOTO — no external/Google font requests (on-prem portal) */
@font-face {
    font-family: "Roboto"; font-style: normal; font-weight: 100; font-display: swap;
    src: url('/static/css/fonts/roboto/Roboto-Thin.woff2') format('woff2'),
         url('/static/css/fonts/roboto/Roboto-Thin.woff') format('woff');
}
@font-face {
    font-family: "Roboto"; font-style: normal; font-weight: 300; font-display: swap;
    src: url('/static/css/fonts/roboto/Roboto-Light.woff2') format('woff2'),
         url('/static/css/fonts/roboto/Roboto-Light.woff') format('woff');
}
@font-face {
    font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/static/css/fonts/roboto/Roboto-Regular.woff2') format('woff2'),
         url('/static/css/fonts/roboto/Roboto-Regular.woff') format('woff');
}
@font-face {
    font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/static/css/fonts/roboto/Roboto-Medium.woff2') format('woff2'),
         url('/static/css/fonts/roboto/Roboto-Medium.woff') format('woff');
}
@font-face {
    font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap;
    src: url('/static/css/fonts/roboto/Roboto-Bold.woff2') format('woff2'),
         url('/static/css/fonts/roboto/Roboto-Bold.woff') format('woff');
}

:root {
    /* BRAND PALETTE — exact livetick.com.au values */
    --theme-hero:   #001D31; /* navy — nav/header, secondary buttons, file-select, focus underline */
    --theme-accent: #E8B038; /* gold — primary action, active tab, selected option, hover highlight */
    --background:   #F4F4F3; /* off-white — page field / dialog field */
    --foreground:   #001D31; /* navy — body text & headings */
    --backshelf:    #FFFFFF; /* white — card / panel / dropdown surface */
    --foreshelf:    #001D31; /* navy — text on white surfaces */
    --forepart:     #FFFFFF; /* light member of the inverse pair — text on navy, light fills */
    --backpart:     #001D31; /* dark member of the inverse pair — dark text, navy fills */
    --shadow:       rgba(0, 29, 49, 0.18); /* low-alpha navy */

    /* DERIVED STATE VARIANTS (color-mix: gold-darkened, navy-lightened) */
    --accent-hover:  color-mix(in oklab, var(--theme-accent) 88%, #000); /* gold pressed/hover */
    --accent-active: color-mix(in oklab, var(--theme-accent) 78%, #000);
    --hero-hover:    #00364F; /* deep teal-navy — hover-on-dark / navy gradient stop */
    --on-accent:     #000000; /* black label/icon on gold (≈10.7:1) */

    /* FOCUS RINGS — gold reads on dark, navy reads on light (both ≥3:1 on their surface) */
    --focus-on-dark:  var(--theme-accent); /* gold ring on navy nav (8.8:1) */
    --focus-on-light: var(--theme-hero);   /* navy ring on white/off-white cards (15.6:1) */

    /* SEMANTIC STATE COLOURS — derived from the established .marker palette (red/green) and
       brand gold (amber), each darkened toward navy so it passes AA as TEXT on white & off-white
       (≥4.5:1). Used for toast keylines/labels and inline form validation. Info reuses brand gold. */
    --state-success: #2E7D32; /* marker green, navy-darkened — 5.13:1 on white */
    --state-error:   #C62828; /* marker red,   navy-darkened — 5.62:1 on white */
    --state-warning: #8A6D00; /* gold/amber,   navy-darkened — 4.92:1 on white */
    --state-info:    var(--theme-accent); /* brand gold keyline (default/info) */
    /* low-alpha tints for toast fills / field-error backgrounds (text stays navy on these) */
    --state-success-bg: color-mix(in oklab, var(--state-success) 10%, var(--backshelf));
    --state-error-bg:   color-mix(in oklab, var(--state-error)   10%, var(--backshelf));
    --state-warning-bg: color-mix(in oklab, var(--state-warning) 10%, var(--backshelf));

    /* TYPOGRAPHY — self-hosted Roboto only */
    --ff-title: "Roboto", "Helvetica Neue", Arial, sans-serif; /* headings: Medium/Bold, tight */
    --ff-body:  "Roboto", "Helvetica Neue", Arial, sans-serif; /* body/data: Regular */

    /* RESPONSIVE CONSTANTS — single source of truth for the two customer screens.
       CSS @media can't read custom props, so the literal edges live in the media
       queries; these mirror them for JS (base.js reads --bp-phone via matchMedia). */
    --bp-phone:  600px;  /* < 600px  → phone: single column, nav collapses, table → cards */
    --bp-tablet: 1024px; /* 600–1024 → tablet: scroll container; > 1024 → desktop (unchanged) */
    /* expanded mobile-nav panel: a deeper navy than the bar so the disclosure reads as
       its own surface; derived from the brand hero, white labels keep AAA contrast on it */
    --nav-panel: color-mix(in oklab, var(--theme-hero) 90%, #000);
    --min-tap:   44px;   /* Apple HIG / WCAG 2.5.5 minimum touch target */
}

/* DARK THEME — toggled by data-theme="dark" on <html> (see base.js theme toggle).
   Only the surface/text/shadow tokens flip; brand gold and the inverse-pair light
   member (forepart) stay put so the navy nav + gold accents read identically.
   Derived (color-mix) tokens that reference these vars recompute automatically. */
[data-theme="dark"] {
    --theme-hero:   #00121F; /* deeper navy header, separates from gold keyline on dark */
    --hero-hover:   #0A2C40;
    --background:   #0A141D; /* near-black navy page field */
    --foreground:   #E6ECF1; /* off-white body text & headings */
    --backshelf:    #14232F; /* card / panel / dropdown surface */
    --foreshelf:    #E6ECF1; /* text on dark surfaces */
    --shadow:       rgba(0, 0, 0, 0.5);
    /* navy focus ring is invisible on dark cards — use gold on both surfaces */
    --focus-on-light: var(--theme-accent);
    /* lift the darkened state colours so they stay legible as text on the dark card */
    --state-success: #5CC264;
    --state-error:   #EF5350;
    --state-warning: #E0A82E;
}