/* Shared design tokens and global reset. */

/* F06: cascade-layer order for the jobs status-tint refactor. Declared here
   because tokens.css is the FIRST sheet loaded (app.html), so this fixes the
   global layer order up front. Precedence low→high: app.base < app.tables <
   app.jobs — so the jobs status row tints (@layer app.jobs, in jobs/pages.css)
   outrank the generic table hover (@layer app.tables, in tables.css) WITHOUT
   `!important`, retiring the old arms race. Cascade gotcha to remember:
   UNLAYERED normal rules outrank ALL layered normal rules, so any rule that
   must lose to a layered one has to be layered too (that's why the generic
   tbody tr:hover is moved into app.tables). First @layer use in the tree;
   scoped to jobs for this introduction (open_debt Phase D CSS hygiene).
   Target browser is Brave/Chromium — @layer is universally supported there. */
@layer app.base, app.tables, app.jobs;

:root {
  --color-white: #fff;
  --color-black: #000;
  --app-brand-900: #0c223c;
  --app-brand-800: #103a5a;
  --app-brand-700: #145f82;
  --app-brand-600: #1f6ab4;
  --app-brand-500: #2f86d8;
  --app-brand-300: #93c2e8;
  --app-brand-200: #b6d6ee;
  --app-brand-100: #d7e8fb;
  --app-brand-50: #eef4f9;
  --app-primary: var(--app-brand-600);
  --app-text-strong: #212529;
  --app-text-default: #495057;
  --app-text-muted: #6c757d;
  --app-text-subtle: #9aa8b7;
  --app-text-inverse: #fff;
  --app-surface-page: #f8f9fa;
  --app-surface-panel: #fff;
  --app-surface-subtle: #f3f7fb;
  --app-surface-muted: #eef4f7;
  --app-surface-selected: #e9f2f9;
  --app-surface-disabled: #e5ecf4;

  /* The legacy --app-surface / -2 / -3 aliases were retired in the
     UI-consistency pass (2026-05-28): kiosk/public.css and jobs
     parts-arrivals — their last consumers — now use the explicit
     -panel/-subtle/-muted names. */
  --app-border-default: #dee2e6;
  --app-border-soft: #d9e4ec;
  --app-border-strong: #bfd0df;
  --app-border: var(--app-border-default);
  --app-text: var(--app-text-default);
  --app-success-accent: #198754;
  --app-success-fg: #0f5132;
  --app-success-bg: #d1e7dd;
  --app-success-soft: #edf8ef;
  --app-success-border: #badbcc;
  --app-warning-accent: #fd7e14;
  --app-warning-fg: #664d03;
  --app-warning-bg: #fff3cd;
  --app-warning-soft: #fff5d7;
  --app-warning-border: #efd28d;
  --app-danger-accent: #dc3545;
  --app-danger-strong: #b42318;
  --app-danger-fg: #842029;
  --app-danger-bg: #f8d7da;
  --app-danger-soft: #fce4e4;
  --app-danger-border: #f5c2c7;
  --app-danger-50: #fef2f2;
  --app-danger-300: #f5a3a3;
  --app-danger-700: var(--app-danger-strong);
  --app-info-accent: #0d6efd;
  --app-info-fg: #084298;
  --app-info-bg: #e3f2fd;
  --app-info-soft: #d7e8fb;
  --app-info-border: #bfd0df;
  --app-neutral-fg: #495057;
  --app-neutral-bg: #e9ecef;
  --app-neutral-soft: #f0f0f0;
  --app-neutral-border: #dee2e6;

  /* Parts-arrivals dropdown palette (Justin-era Tailwind blues/greens
     used by `manifest/static/jobs/pages.css` parts-arrivals + inline-edit
     focus/hover blocks). Kept here so the palette stays in one place. */
  --pa-row-hover-bg: rgb(0 0 0 / 6%);
  --pa-arrived-bg: rgb(34 197 94 / 14%);
  --pa-arrived-fg: rgb(21 128 61);
  --pa-pending-bg: rgb(234 179 8 / 18%);
  --pa-pending-fg: rgb(133 77 14);
  --pa-pending-bg-soft: rgb(234 179 8 / 8%);
  --pa-pending-border: rgb(234 179 8 / 55%);
  --pa-info-bg: rgb(59 130 246 / 14%);
  --pa-info-bg-soft: rgb(59 130 246 / 12%);
  --pa-info-fg: rgb(29 78 216);
  --pa-focus-ring: rgb(37 99 235 / 18%);
  --pa-elevation-shadow: rgb(15 23 42 / 15%);
  --pa-completed-stripe: rgb(91 163 122 / 12%);

  /* C04: XLSX-canonical row tints (mirrors conditional formatting in
     `/home/usar/Documents/HESS Shop _ Field Service Jobs in Progress.xlsx`).
     The two strong tints (completed vivid green, CNS blue) flip row text
     to white in `manifest/static/jobs/pages.css`. */
  --job-status-on-hold-bg: #D9D9D9;
  --job-status-on-hold-border: #efd28d;
  --job-status-ongoing-bg: #DAF1D0;
  --job-status-ongoing-border: #badbcc;
  --job-status-completed-bg: #00B050;
  --job-status-completed-border: #5cab6b;
  --job-status-completed-fg: hsl(120deg 50% 25%);
  --job-status-awaiting-bg: #FFC;
  --job-status-awaiting-border: #e7c178;
  --job-status-awaiting-strong-bg: #FFC;
  --job-status-awaiting-strong-border: #d49a47;

  /* F03: per-status left-border accents so the three awaiting_* statuses
     (one shared cream bg in pages.css) are individually glanceable. Warm
     family — amber → ochre → deep amber — so the "waiting" group identity
     still reads as one color block. */
  --job-status-awaiting-arrival-accent: #E0A030;
  --job-status-awaiting-parts-accent: #C77F2A;
  --job-status-awaiting-both-accent: #9A5B12;
  --job-status-decision-bg: #DAE9F8;
  --job-status-decision-border: #c8cad4;
  --job-status-decision-fg: #3b3f4a;
  --job-status-completed-not-shipped-bg: #0070C0;
  --job-status-completed-not-shipped-border: #6ba37a;

  /* v1.9.2 R09: priority 6 = "Invoiced". Deliberately OUTSIDE the C04
     row-tint family. 1→5 is a shop-work ladder (urgent red → done green);
     "invoiced" is a billing fact layered on top of an already-finished
     job, not a further stage of shop work, so it gets its own hue rather
     than a sixth step of the same gradient. Purple is the only unused
     region of the palette — it cannot be confused with the danger red,
     warning amber, CNS blue or completed green already in play.
     7.38:1 against white text (AAA). */
  --job-priority-invoiced-bg: #6B3FA0;

  /* Row-tint strength (UI-consistency pass, 2026-05-28, G01). The two strong
     XLSX terminal fills — completed (vivid green) and CNS (vivid blue) — read
     too "hard" as full-row fills. Per Mitch, the new pattern is: render a
     strong status fill as a soft WASH of its canonical token over the panel
     surface (`color-mix(in srgb, <token> var(--job-row-tint-strength),
     var(--app-surface-panel))`), with normal dark text — no per-status white/
     near-black foreground hacks. One knob tunes how strong every washed tint
     reads. The already-light tints (on-hold/awaiting/decision/ongoing) are
     soft hexes and stay as-is. The paired -fg / -halo control washed-row text
     contrast (Mitch 2026-05-28: 85% fill, white text, no halo). -fg is the
     DEFAULT (white, reads on the blue CNS wash); the green completed row
     re-points -fg to near-black in pages.css because white on green is only
     2.48:1 (fails — the white-on-#00B050 issue F01 caught). */
  --job-row-tint-strength: 85%;
  --job-row-tint-fg: var(--app-text-inverse);
  --job-row-tint-halo: none;
  --alpha-brand-12: rgb(20 95 130 / 12%);
  --alpha-brand-10: rgb(20 95 130 / 10%);
  --alpha-brand-45: rgb(20 95 130 / 45%);
  --alpha-brand-40: rgb(20 95 130 / 40%);
  --alpha-brand-34: rgb(20 95 130 / 34%);
  --alpha-brand-22: rgb(20 95 130 / 22%);
  --alpha-brand-20: rgb(20 95 130 / 20%);
  --alpha-brand-18: rgb(31 101 134 / 16%);
  --alpha-brand-15: rgb(20 95 130 / 15%);
  --alpha-brand-14: rgb(20 95 130 / 14%);
  --alpha-brand-00: rgb(20 95 130 / 0%);
  --alpha-success-18: rgb(25 135 84 / 18%);
  --alpha-danger-18: rgb(220 53 69 / 18%);
  --alpha-white-97: rgb(255 255 255 / 97%);
  --alpha-white-92: rgb(255 255 255 / 92%);
  --alpha-white-85: rgb(255 255 255 / 85%);
  --alpha-white-82: rgb(255 255 255 / 82%);
  --alpha-white-72: rgb(255 255 255 / 72%);
  --alpha-white-68: rgb(255 255 255 / 68%);
  --alpha-white-50: rgb(255 255 255 / 50%);
  --alpha-white-32: rgb(255 255 255 / 32%);
  --alpha-white-18: rgb(255 255 255 / 18%);
  --alpha-white-14: rgb(255 255 255 / 14%);
  --alpha-white-12: rgb(255 255 255 / 12%);
  --alpha-white-08: rgb(255 255 255 / 8%);
  --alpha-black-42: rgb(8 23 42 / 42%);
  --alpha-black-35: rgb(0 0 0 / 35%);
  --alpha-black-12: rgb(0 0 0 / 12%);
  --alpha-black-08: rgb(12 34 46 / 8%);
  --alpha-black-02: rgb(15 23 42 / 2%);
  --alpha-black-12-card: rgb(12 34 46 / 12%);
  --alpha-paper-sheet-shadow: rgb(24 35 52 / 12%);
  --alpha-paper-attachment-bg: rgb(255 255 255 / 95%);
  --alpha-paper-rule-28: rgb(32 32 32 / 28%);
  --radius: 4px;
  --shadow-sm: 0 1px 3px var(--alpha-black-12);
  --focus-ring: 0 0 0 2px var(--alpha-brand-15);

  /* Spacing scale (UI-consistency pass, 2026-05-28). A 4px-based step set
     whose values are the dominant existing rem literals across the app CSS
     (113× 1rem, 81× 0.75rem, 78× 0.5rem, …). Shared _app/ primitives and the
     high-traffic feature sheets pull from these instead of ad-hoc one-offs so
     vertical rhythm and padding stay uniform. Density target stays
     comfortable-but-dense — this codifies the existing values, it does not
     re-scale them. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --manual-brand-900: #11253f;
  --manual-brand-800: #0f1e33;
  --manual-brand-700: #1d3854;
  --manual-brand-600: #285472;
  --manual-accent: #2b77a2;
  --manual-accent-hover: #154966;
  --manual-accent-soft: rgb(55 96 136 / 12%);
  --manual-surface-page: #f7fafc;
  --manual-surface-panel: #fff;
  --manual-surface-subtle: #eef4fa;
  --manual-surface-tint: #f3f8fc;
  --manual-surface-table: #fbfdff;
  --manual-text-strong: #1a2f46;
  --manual-text-default: #203247;
  --manual-text-muted: #5d7594;
  --manual-text-soft: #44556d;
  --manual-text-inverse: #fff;
  --manual-border-default: #d9e0e7;
  --manual-border-soft: #cfdae6;
  --manual-border-strong: #c4d1e1;
  --manual-shadow-lg: rgb(10 24 48 / 7%);
  --manual-shadow-md: rgb(10 24 48 / 5%);
  --manual-shadow-sm: rgb(10 24 48 / 4%);
  --manual-overlay-bg: rgb(13 22 35 / 58%);
  --manual-overlay-shadow: rgb(9 17 30 / 28%);
  --manual-mark-bg: #f7e7a4;
  --color-paper-ink: #161616;
  --color-paper-frame-bg: #d7dde5;
  --color-paper-frame-bg-alt: #e4e8ee;
  --color-paper-button-bg: #1f2937;
  --color-paper-rule: #202020;
  --color-paper-muted: #55606f;
  --color-paper-border: #aeb4bc;
  --color-paper-help-border: #6b7280;
  --color-paper-help-text: #4b5563;
  --color-paper-accent: #0b63d1;
  --color-paper-accent-hover: #084ea4;
  --color-paper-attachment-border: #b8bec8;
  --color-paper-card-border: #ccd3dd;
  --color-paper-photo-bg: #f2f4f7;
  --color-paper-chip-bg: #edf1f6;
  --color-paper-chip-text: #4d5764;
  --color-paper-document-text: #3e4957;
  --color-paper-alert-border: #e2b8b8;
  --color-paper-alert-bg: #fff4f4;
  --color-paper-alert-text: #8a2626;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  background: var(--app-surface-page);
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--app-text-strong);
  background: var(--app-surface-page);
}

body.app-body {
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior-y: none;
}

a {
  color: var(--app-brand-700);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}