/* ============================================================
   A.J. Stone — shared design tokens
   ------------------------------------------------------------
   Extracted 2026-10-16 from the Service App (service.ajstoneservice.com,
   styles.css + inline styles in app.js). Plain CSS custom properties only —
   no framework. Drop this file in first, then build components on the
   variables (see STYLE-SPEC.md for how each component uses them).

   Every value below is read straight from the Service App's code unless
   marked "(approx.)".
   ============================================================ */

:root {

  /* ---------- Brand & neutrals ---------- */
  --ajs-black:        #0d0d0f;   /* near-black: primary button, active tab, avatar, headings, strong text */
  --ajs-black-hover:  #000000;   /* primary (black) button hover */
  --ajs-panel:        #16161a;   /* dark panel tone (declared in the app, rarely used) */
  --ajs-ink:          #1b1b1e;   /* body text colour (text primary) */
  --ajs-muted:        #6c6c73;   /* secondary text: meta lines, labels, helper text */
  --ajs-grey:         #8a8a92;   /* tertiary / faint text (timeline timestamps) */
  --ajs-red:          #9e1b23;   /* brand red: primary red button, section labels, red rules, focus border */
  --ajs-red-bright:   #c0202e;   /* brighter red: "past due" numbers/badges, errors, required-field asterisks */
  --ajs-red-deep:     #7a141b;   /* red button hover, red hint text */

  /* ---------- Surfaces ---------- */
  --ajs-bg:           #f2f2f4;   /* page background (also the PWA manifest background_color) */
  --ajs-card:         #ffffff;   /* card / "bubble" background */
  --ajs-line:         #e5e5ea;   /* card border, input border, dividers between list entries */
  --ajs-soft:         #f7f7f9;   /* subtle fill: list-row hover, PIN display, terms box */
  --ajs-input-bg:     #fbfbfc;   /* input / select / option-row resting background */
  --ajs-ice:          #faeff0;   /* pale red tint: secondary button hover, selected option row, red hint bg */
  --ajs-ice-line:     #f0d8da;   /* border for the pale red tint */
  --ajs-thumb-bg:     #eef0f3;   /* thumbnail / photo placeholder background */

  /* ---------- Header (three bands, top to bottom) ---------- */
  --ajs-topstrip-bg:    #000000;   /* black top strip ("A.J. STONE · SERVICE APP  Beta — …") */
  --ajs-topstrip-text:  #c9c9cf;   /* top strip body text */
  --ajs-topstrip-tag:   #ffffff;   /* top strip app-name text (bold, letter-spaced) */
  --ajs-topstrip-rule:  var(--ajs-red);   /* 2px red rule under the top strip */
  --ajs-band-bg-top:    #0d0d0f;   /* dark band gradient start (top) */
  --ajs-band-bg-bottom: #171719;   /* dark band gradient end (bottom) */
  --ajs-band-title:     #cfcfd4;   /* "SERVICE DEPARTMENT" uppercase title in the band */
  --ajs-band-contact:   #9a9aa2;   /* right-aligned contact text in the band */
  --ajs-band-rule:      var(--ajs-red);   /* 3px red rule under the dark band */
  --ajs-topstrip-btn-bg:     rgba(255,255,255,.08);  /* "↺ Refresh" button on the strip */
  --ajs-topstrip-btn-border: rgba(255,255,255,.18);
  --ajs-topstrip-btn-text:   #eaeaea;
  --ajs-topstrip-btn-hover:  rgba(255,255,255,.16);

  /* ---------- Buttons ---------- */
  --ajs-btn-primary-bg:        var(--ajs-red);        /* primary action (dark red) */
  --ajs-btn-primary-bg-hover:  var(--ajs-red-deep);
  --ajs-btn-primary-text:      #ffffff;
  --ajs-btn-black-bg:          var(--ajs-black);      /* default .btn with no modifier is black */
  --ajs-btn-black-bg-hover:    #000000;
  --ajs-btn-secondary-bg:      #ffffff;               /* secondary "ghost" pill */
  --ajs-btn-secondary-border:  var(--ajs-line);
  --ajs-btn-secondary-text:    var(--ajs-black);
  --ajs-btn-secondary-hover-bg:     var(--ajs-ice);
  --ajs-btn-secondary-hover-border: var(--ajs-red);
  --ajs-btn-green-bg:          #2f9e70;               /* confirm / success button */
  --ajs-btn-green-bg-hover:    #25865d;
  --ajs-btn-disabled-opacity:  .45;

  /* ---------- Tabs (pill buttons with count) ---------- */
  --ajs-tab-bg:            #ffffff;
  --ajs-tab-border:        var(--ajs-line);
  --ajs-tab-text:          var(--ajs-muted);
  --ajs-tab-active-bg:     var(--ajs-black);
  --ajs-tab-active-text:   #ffffff;
  --ajs-tab-count-opacity: .7;     /* the count number inside a tab is same colour at 70% opacity */

  /* ---------- Status pills (bg / text) — one pair per workflow stage ---------- */
  --ajs-pill-received-bg:    #edeef1;  --ajs-pill-received-text:    #5a5a63;  /* 0 Received */
  --ajs-pill-diagnosing-bg:  #e7eefb;  --ajs-pill-diagnosing-text:  #2E5FB5;  /* 1 Diagnosing */
  --ajs-pill-waiting-bg:     #fdf2e0;  --ajs-pill-waiting-text:     #c9861f;  /* 2 Waiting on part/PO (also "On-site · in progress") */
  --ajs-pill-vendor-bg:      #ecebfb;  --ajs-pill-vendor-text:      #5a54c9;  /* 3 Vendor / outside */
  --ajs-pill-parts-bg:       #efe9fb;  --ajs-pill-parts-text:       #6b3fc4;  /* 4 Parts received */
  --ajs-pill-servicedone-bg: #e4f4f4;  --ajs-pill-servicedone-text: #1f8f8f;  /* 5 Service done */
  --ajs-pill-ready-bg:       #e6f5ee;  --ajs-pill-ready-text:       #2f9e70;  /* 6 Ready (also "On-site · done") */
  --ajs-pill-done-bg:        #0d0d0f;  --ajs-pill-done-text:        #ffffff;  /* 7 Done */

  /* ---------- Small square badges (warranty / past-due / role) ---------- */
  --ajs-badge-warranty-bg:   #e6f5ee;  --ajs-badge-warranty-text:   #2f9e70;  /* "UNDER WARRANTY" */
  --ajs-badge-hybrid-bg:     #fdf2e0;  --ajs-badge-hybrid-text:     #c9861f;  /* "WARRANTY + BILLABLE" */
  --ajs-badge-billable-bg:   #edeef1;  --ajs-badge-billable-text:   #5a5a63;  /* "BILLABLE REPAIR" */
  --ajs-badge-due-bg:        #fdeaea;  --ajs-badge-due-text:        #c0202e;  /* "⚠ 5d no update" */
  --ajs-badge-role-bg:       var(--ajs-black); --ajs-badge-role-text: #ffffff; /* "ADMIN" / "SERVICE" role chip */

  /* ---------- Semantic ---------- */
  --ajs-success:       #2f9e70;   /* green: done steps, success text, ready pill */
  --ajs-success-bg:    #e6f5ee;
  --ajs-warning:       #c9861f;   /* amber: "unassigned", in-progress, hints */
  --ajs-warning-bg:    #fdf2e0;
  --ajs-warning-border:#f2dcae;
  --ajs-warning-text:  #7a5714;   /* text colour inside an amber hint box */
  --ajs-error:         #c0202e;   /* error messages, error input border */
  --ajs-error-bg:      #fdf3f4;   /* error input background */
  --ajs-info:          #2E5FB5;   /* blue: customer-authored timeline marker */
  --ajs-info-bg:       #e7eefb;

  /* ---------- Stat cards ---------- */
  --ajs-stat-number:      var(--ajs-black);     /* big number */
  --ajs-stat-number-due:  var(--ajs-red-bright);/* "Past due" variant of the number */
  --ajs-stat-label:       var(--ajs-muted);

  /* ---------- Progress bar ---------- */
  --ajs-progress-track:  #e9e9ee;
  --ajs-progress-fill:   linear-gradient(90deg, var(--ajs-red), var(--ajs-success)); /* red → green */
  --ajs-progress-height: 7px;
  --ajs-progress-width:  160px;   /* fixed width in list rows, capped at 40vw on phones */

  /* ---------- Inputs ---------- */
  --ajs-input-border:        var(--ajs-line);
  --ajs-input-border-width:  1.5px;
  --ajs-input-focus-border:  var(--ajs-red);     /* focus = red border, white bg, no outline/ring */
  --ajs-input-focus-bg:      #ffffff;
  --ajs-input-placeholder:   #c7c7cf;            /* (read from the PIN input; other inputs use the browser default) */
  --ajs-input-accent:        var(--ajs-red);     /* checkbox / radio accent-color */

  /* ---------- Shadows ---------- */
  --ajs-shadow-card:  0 1px 2px rgba(13,13,15,.06), 0 6px 20px rgba(13,13,15,.09); /* cards, dropdowns */
  --ajs-shadow-toast: 0 10px 30px rgba(0,0,0,.3);
  --ajs-shadow-focus-step: 0 0 0 4px rgba(158,27,35,.16);  /* ring on the "current" tracker step */
  /* buttons have NO box-shadow */

  /* ---------- Typography ---------- */
  /* System font stack — nothing is loaded from Google Fonts or self-hosted. */
  --ajs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ajs-line-height: 1.5;          /* body default */
  /* Weights actually used. The in-between values (650/750/850) only render as such on variable
     system fonts (SF on Apple, Segoe UI Variable on Windows 11); elsewhere they round to 600/700/800. */
  --ajs-w-regular:   500;
  --ajs-w-medium:    600;
  --ajs-w-semibold:  650;
  --ajs-w-bold:      700;
  --ajs-w-bold-plus: 750;
  --ajs-w-heavy:     800;
  --ajs-w-black:     850;
  --ajs-w-ultra:     900;

  /* Sizes (px). Names map to the components in STYLE-SPEC.md */
  --ajs-fs-topstrip:      12.5px;  /* black strip text; app-name tag is same size, weight 800, letter-spacing .06em */
  --ajs-fs-band-title:    12px;    /* "SERVICE DEPARTMENT": uppercase, weight 700, letter-spacing .22em */
  --ajs-fs-band-contact:  11px;    /* right-aligned contact lines */
  --ajs-fs-h1:            24px;    /* page h1: weight 850, letter-spacing -.01em */
  --ajs-fs-section-title: 16px;    /* card list header ("Service queue — all requests"): h2, weight 700 (browser h2 default bold) */
  --ajs-fs-section-label: 12px;    /* red uppercase section label: weight 800, letter-spacing .09em */
  --ajs-fs-card-title:    15px;    /* list entry title (customer name): weight 750 */
  --ajs-fs-card-meta:     12.5px;  /* list entry meta line: colour muted, single line, ellipsis */
  --ajs-fs-card-number:   12px;    /* "#107" after the title: weight 600, muted */
  --ajs-fs-card-wo:       12px;    /* bold "WO# W0009681" line: weight 800, black, letter-spacing .02em */
  --ajs-fs-stat-number:   22px;    /* stat card number: weight 850 */
  --ajs-fs-stat-label:    11px;    /* stat card label: weight 650, muted */
  --ajs-fs-btn:           14px;    /* button text: weight 700 */
  --ajs-fs-btn-sm:        12.5px;  /* small button text: weight 700 */
  --ajs-fs-tab:           13.5px;  /* tab pill: weight 700 */
  --ajs-fs-pill:          11.5px;  /* status pill: weight 700, NOT uppercase */
  --ajs-fs-badge:         11px;    /* square badges: weight 800, uppercase, letter-spacing .03em */
  --ajs-fs-input:         14px;    /* inputs/selects/textarea (see STYLE-SPEC: use 16px on phones) */
  --ajs-fs-label:         12.5px;  /* form labels: weight 700, black */
  --ajs-fs-helper:        11.5px;  /* small helper / error text (errors weight 600) */
  --ajs-fs-body-sm:       13.5px;  /* key/value rows, timeline text, option rows */
  --ajs-fs-avatar:        15px;    /* initials in the avatar: weight 800 */
  --ajs-fs-user-name:     14px;    /* (approx. — inherits body size) name next to avatar: weight 850 */
  --ajs-fs-user-sub:      12.5px;  /* role line under the name: muted */
  --ajs-fs-detail-title:  20px;    /* work-order detail title: weight 850 */
  --ajs-fs-tagline:       48px;    /* sign-in hero "WE SERVICE WHAT WE SELL": weight 850, letter-spacing .04em, line-height 1.1 (34px on phones) */
  --ajs-fs-pin:           26px;    /* PIN entry box: weight 800, letter-spacing .35em */
  --ajs-fs-toast:         13.5px;  /* toast: weight 650 */

  /* ---------- Radii ---------- */
  --ajs-radius-card:     14px;   /* cards / bubbles */
  --ajs-radius-hero:     16px;   /* sign-in hero card */
  --ajs-radius-btn:      9px;    /* buttons, tabs, inputs, selects, option rows */
  --ajs-radius-btn-sm:   8px;    /* small buttons */
  --ajs-radius-strip-btn:7px;    /* button on the black top strip */
  --ajs-radius-pill:     999px;  /* status pills */
  --ajs-radius-badge:    6px;    /* square badges (warranty / due / role) */
  --ajs-radius-avatar:   11px;   /* avatar is a rounded SQUARE, not a circle */
  --ajs-radius-thumb:    10px;   /* 46px list thumbnail */
  --ajs-radius-photo:    11px;   /* 84px photo tile */
  --ajs-radius-hint:     10px;   /* hint / notice boxes */
  --ajs-radius-toast:    11px;
  --ajs-radius-progress: 99px;

  /* ---------- Borders ---------- */
  --ajs-border-card:   1px;    /* card outline */
  --ajs-border-ctrl:   1.5px;  /* buttons (ghost), tabs, inputs, option rows */
  --ajs-border-divider:1px;    /* between list entries (solid) and timeline rows (dashed) */

  /* ---------- Spacing & layout ---------- */
  --ajs-page-max:        1040px;        /* content max-width */
  --ajs-page-pad-x:      18px;          /* page side padding (same on phone and desktop) */
  --ajs-page-pad-top:    22px;
  --ajs-page-pad-bottom: 70px;          /* room above the toast / home-indicator */
  --ajs-card-pad:        22px;          /* generic card body padding (detail-body) */
  --ajs-card-head-pad:   16px 18px;     /* list card header row */
  --ajs-row-pad:         15px 18px;     /* one list entry inside a card */
  --ajs-row-gap:         14px;          /* gap thumbnail → text → status column inside an entry */
  --ajs-card-gap:        16px;          /* vertical gap between stacked cards / sections */
  --ajs-stat-gap:        12px;          /* gap between stat cards */
  --ajs-stat-pad:        13px 15px;
  --ajs-tab-gap:         8px;           /* gap between tab pills */
  --ajs-tabs-margin-b:   18px;          /* space under the tab row */
  --ajs-btn-gap:         10px;          /* gap between adjacent buttons in a .row */
  --ajs-btn-pad:         10px 16px;     /* button padding → ~41px tall at 14px text */
  --ajs-btn-sm-pad:      7px 12px;      /* small button → ~33px tall */
  --ajs-btn-min-height:  41px;          /* (approx. — derived: 10+10 padding + 14px*1.5 line) */
  --ajs-tab-pad:         9px 15px;      /* tab pill → ~39px tall */
  --ajs-input-pad:       10px 12px;     /* input/select → ~44px tall at 14px text */
  --ajs-input-height:    44px;          /* (approx. — derived: 10+10 padding + 1.5*2 border + 21px line) */
  --ajs-field-gap:       14px;          /* margin below each form field */
  --ajs-label-gap:       5px;           /* label → control */
  --ajs-pill-pad:        4px 10px;
  --ajs-badge-pad:       3px 9px;
  --ajs-section-label-m: 22px 0 8px;    /* red section label margins */
  --ajs-rolehead-m:      20px;          /* space under the avatar/name header */
  --ajs-avatar-size:     42px;
  --ajs-thumb-size:      46px;
  --ajs-logo-height:     50px;          /* header logo rendered height (width auto ≈ 66px) */

  /* ---------- Breakpoints (use in media queries; custom props can't be used there, listed for reference) ---------- */
  /* 820px: stat grid 5 → 2 columns; key/value grid 2 → 1 column; report grid 2 → 1 */
  /* 640px: sign-in tagline 48 → 34px; vendor logos 66 → 46px */
  /* Everything else is fluid (flex-wrap) — there is no separate phone layout for header, tabs or list rows. */

  /* ---------- Motion ---------- */
  --ajs-transition-btn:  .15s;
  --ajs-transition-row:  .12s;
  --ajs-transition-bar:  width .4s;
  --ajs-transition-toast:.35s;
}