/* ═══════════════════════════════════════════════════════════════════════════
   CertLogIQ — TOKENS
   ───────────────────────────────────────────────────────────────────────────
   The single source of truth for every colour, size and space in both apps.
   Load this FIRST, before any other stylesheet, on app.html AND index.html.

   Nothing in here styles anything. It only names values. If you want to
   change the red, you change it once, here, and both apps follow.

   ▶ LOAD ORDER
       app.html   : tokens.css → design-system.css → inline <style> → polish.css
       index.html : tokens.css → inline <style> → ui.css

   ▶ RULE
       No hex codes anywhere else. If a screen needs a colour that isn't in
       here, the answer is nearly always that it should reuse one that is.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

    /* ═══ SIGNAL ════════════════════════════════════════════════════════════
       These four carry all the meaning in both apps. Nothing decorative may
       use them. A technician glancing at a phone in a corridor should be able
       to trust that red means one thing only.                                */

    --fa-fail:        #D92D20;   /* failed test · overdue · destructive       */
    --fa-pass:        #067647;   /* passed test · compliant                   */
    --fa-due:         #B54708;   /* due soon · needs attention                */
    --fa-info:        #175CD3;   /* in progress · informational only          */

    --fa-fail-wash:   #FEF3F2;
    --fa-pass-wash:   #ECFDF3;
    --fa-due-wash:    #FFFAEB;

    /* ═══ BRAND ═════════════════════════════════════════════════════════════
       The mark only: login screen, splash, PDF header, app icon, marketing.
       Deliberately NOT the same value as --fa-fail, so brand red and danger
       red can never be confused with one another in the UI.                  */

    --fa-brand:       #E53935;
    --fa-brand-dark:  #C62828;

    /* ═══ CHROME (dark surfaces) ════════════════════════════════════════════ */

    --fa-chrome:      #0F141A;   /* nav bars, admin sidebar, tab bar          */
    --fa-chrome-2:    #1A222C;   /* raised chrome                             */
    --fa-chrome-line: #2A3542;   /* dividers on dark                          */

    /* ═══ PAPER (light surfaces) ════════════════════════════════════════════ */

    --fa-paper:       #FFFFFF;
    --fa-paper-sunk:  #F4F6F8;   /* the page behind the content               */
    --fa-hairline:    #E4E8EC;   /* THE divider. Not a shadow, not a border.  */
    --fa-hairline-2:  #EEF1F5;   /* lighter rule, inside cards                */

    /* ═══ INK ═══════════════════════════════════════════════════════════════ */

    --fa-ink:         #0F141A;   /* headings, primary text        18.5:1     */
    --fa-ink-2:       #334155;   /* body                          10.4:1     */
    --fa-ink-3:       #475467;   /* secondary subtext              7.7:1     */
    --fa-ink-4:       #667085;   /* captions, timestamps           5.0:1     */

    /* Contrast ratios above are against --fa-paper. WCAG AA needs 4.5:1 for
       body text; ink-4 was #8B95A1 at 3.04:1 and FAILED. Cole compared the app
       to Uptick and said ours looked grey and faint — it measurably was, and
       ink-4 is used for real content (timestamps, locations, the crew line),
       not only for hints. ink-3 was darkened with it so the two stay clearly
       apart; ink and ink-2 were already fine and are unchanged.

       If a caption ever needs to be genuinely faint — a true placeholder over
       an input — that is what a lower opacity is for, not a lighter token.  */

    /* ═══ TYPE ══════════════════════════════════════════════════════════════ */

    --fa-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

    /* The data face. Asset refs, job numbers, dates, money and durations are
       set in a tabular mono so they align down a column and 0 can't be
       misread as O — on a compliance record that's a safety property, not a
       style choice. Uptick sets everything in one proportional face; this is
       a real functional difference, not a cosmetic one.                      */
    --fa-font-data: ui-monospace, 'SF Mono', SFMono-Regular, Menlo,
                    Consolas, monospace;

    /* One scale. Nothing below 11px, and 11px only for tracked uppercase,
       because caps read larger than their point size suggests.               */
    --fa-t-micro:   11px;   /* eyebrow labels, table headers — UPPERCASE only */
    --fa-t-meta:    13px;   /* captions, counts, timestamps                   */
    --fa-t-body:    15px;   /* default body, table cells, card titles         */
    --fa-t-lead:    17px;   /* list row primary text, modal titles            */
    --fa-t-title:   20px;   /* section heading                                */
    --fa-t-page:    22px;   /* page title (admin)                             */
    --fa-t-display: 28px;   /* large title (tech app), KPI numbers            */

    --fa-lh-tight: 1.25;
    --fa-lh-body:  1.5;

    /* ═══ SPACE — 4px base. Use these; don't invent 13px. ═══════════════════ */

    --fa-1:  4px;   --fa-2:  8px;   --fa-3: 12px;  --fa-4: 16px;
    --fa-5: 20px;   --fa-6: 24px;   --fa-8: 32px;  --fa-10: 40px;

    /* ═══ RADIUS — three values, that is all ════════════════════════════════ */

    --fa-r-sm:   6px;    /* inputs, chips, small controls                     */
    --fa-r-md:  10px;    /* cards, modals, buttons                            */
    --fa-r-full: 999px;  /* pills, avatars, status dots                       */

    /* ═══ ELEVATION ═════════════════════════════════════════════════════════
       Sparing. On the tech app, prefer a hairline to a shadow — stacked
       shadowed cards on a grey page is the strongest "template" signal
       there is.                                                              */

    --fa-shadow-xs: 0 1px 2px rgba(16,24,40,0.05);
    --fa-shadow-sm: 0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.04);
    --fa-shadow-md: 0 4px 12px rgba(16,24,40,0.08), 0 2px 4px rgba(16,24,40,0.04);
    --fa-shadow-lg: 0 12px 28px rgba(16,24,40,0.12), 0 4px 8px rgba(16,24,40,0.06);
}


/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY ALIASES
   ───────────────────────────────────────────────────────────────────────────
   polish.css, design-system.css and hundreds of inline styles still refer to
   the old variable names. Rather than rename every call site at once, the old
   names now POINT AT the tokens above. Change a value once, up there, and
   everything that still uses an old name follows.

   As screens get migrated, delete the alias they were using. When this block
   is empty, the migration is finished — it doubles as the progress bar.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --primary:            var(--fa-brand);
    --primary-dark:       var(--fa-brand-dark);
    --brand-primary:      var(--fa-brand);
    --brand-primary-dark: var(--fa-brand-dark);
    --sidebar-active:     var(--fa-brand);

    --p-accent:       var(--fa-brand);
    --p-accent-dark:  var(--fa-brand-dark);
    --p-accent-tint:  rgba(229, 57, 53, 0.08);
    --p-accent-tint2: rgba(229, 57, 53, 0.14);
    --p-accent-glow:  rgba(229, 57, 53, 0.30);

    --p-ink:     var(--fa-ink);
    --p-ink-2:   var(--fa-ink-2);
    --p-muted:   var(--fa-ink-3);
    --p-faint:   var(--fa-ink-4);
    --p-eyebrow: var(--fa-ink-4);

    --p-line:   var(--fa-hairline-2);
    --p-line-2: var(--fa-hairline);
    --p-bg-sub: var(--fa-paper-sunk);

    --fs-eyebrow:   var(--fa-t-micro);
    --fs-caption:   var(--fa-t-meta);
    --fs-secondary: 14px;               /* admin-only step, kept for now */
    --fs-body:      var(--fa-t-body);
    --fs-title-sm:  var(--fa-t-body);
    --fs-title:     var(--fa-t-lead);
    --fs-page:      var(--fa-t-page);
    --fs-stat:      30px;

    --lh-tight: var(--fa-lh-tight);
    --lh-body:  var(--fa-lh-body);

    --p-shadow-xs: var(--fa-shadow-xs);
    --p-shadow-sm: var(--fa-shadow-sm);
    --p-shadow-md: var(--fa-shadow-md);
    --p-shadow-lg: var(--fa-shadow-lg);

    --p-radius:      var(--fa-r-md);
    --p-radius-sm:   var(--fa-r-sm);
    --p-radius-pill: var(--fa-r-full);

    /* From the tech app's index.html inline :root.
       NOTE --success / --warning are ALSO owned by design-system.css on
       app.html, which loads after this file and would win there. That is
       fine and intended: design-system.css now points at the same tokens,
       so both apps resolve to the same colour either way. Don't "fix" the
       apparent duplication by deleting one — they cover different pages. */
    --dark:       var(--fa-chrome);
    --success:    var(--fa-pass);
    --warning:    var(--fa-due);
    --danger:     var(--fa-fail);
    --text:       var(--fa-ink);
    --text-light: var(--fa-ink-3);
    --bg:         var(--fa-paper-sunk);
    --card:       var(--fa-paper);

    /* from design-system.css — listed so this file stays the full index */
    --neutral-50:  #FAFAFA;   --neutral-100: var(--fa-paper-sunk);
    --neutral-200: var(--fa-hairline-2); --neutral-300: var(--fa-hairline);
    --neutral-400: #BDBDBD;   --neutral-500: var(--fa-ink-4);
    --neutral-600: var(--fa-ink-3);      --neutral-700: #616161;
    --neutral-800: #424242;   --neutral-900: var(--fa-ink);
}