/* RepairBay design system v0.3 — the ONLY file that holds colors, type and spacing.
   Every stylesheet (app.css, module CSS, the phone app) and the printouts read these variables; emails read
   them too (design_tokens() parses this file). Pages and other stylesheets hold no hex colors.
   Themes change the top bar and the main color only; status colors mean the same in every theme.
   Check every pair after a change: python3 tools/contrast.py */
:root,[data-theme="navy"]{
  --rb-nav:#0F2A4A;          /* top bar */
  --rb-nav-2:#1E3D63;        /* search box and hover on the top bar */
  --rb-nav-text:#B9C7D8;     /* secondary text on the top bar */
  --rb-primary:#2563EB;      /* the one main button per screen, links */
  --rb-primary-hover:#1D4ED8;
  --rb-primary-tint:#E8F0FD; /* selected menu item, selected choice, preferred channel */
  --rb-focus:0 0 0 3px rgba(37,99,235,.35);
}
[data-theme="graphite"]{
  --rb-nav:#1F2937; --rb-nav-2:#374151; --rb-nav-text:#C9D1DB;
  --rb-primary:#2563EB; --rb-primary-hover:#1D4ED8; --rb-primary-tint:#E8F0FD;
  --rb-focus:0 0 0 3px rgba(37,99,235,.35);
}
[data-theme="teal"]{
  --rb-nav:#0B3B3C; --rb-nav-2:#14524F; --rb-nav-text:#B3D3D0;
  --rb-primary:#0F766E; --rb-primary-hover:#115E59; --rb-primary-tint:#E3F4F1;
  --rb-focus:0 0 0 3px rgba(15,118,110,.35);
}
[data-theme="indigo"]{
  --rb-nav:#1E1B4B; --rb-nav-2:#312E81; --rb-nav-text:#C7C5EC;
  --rb-primary:#4F46E5; --rb-primary-hover:#4338CA; --rb-primary-tint:#EEEFFD;
  --rb-focus:0 0 0 3px rgba(79,70,229,.35);
}
:root{
  --rb-bg:#F5F7FA;           /* page background */
  --rb-card:#FFFFFF;
  --rb-line:#E3E8EF;         /* borders and dividers */
  --rb-field:#7F8C9E;        /* form field and secondary button borders: 3.4:1 on white (WCAG non-text contrast) */
  --rb-text:#1F2937;
  --rb-text-2:#6B7280;       /* secondary text */
  --rb-on-dark:#FFFFFF;      /* text and icons on the main color and the top bar */
  --rb-overlay:#000000;      /* camera scanner background */
  --rb-ink:#000000;          /* printed labels and barcodes */
  --rb-pen-red:#FF2A2A; --rb-pen-yellow:#FFD400; --rb-pen-white:#FFFFFF;   /* the technician's pens for marking up a photo */
  --rb-overlay-bar:#111111; --rb-overlay-btn:#2A2A2A; --rb-overlay-line:#555555;  /* photo markup and camera toolbars */
  --rb-hover:rgba(15,23,42,.04);
  --rb-scrim:rgba(15,23,42,.45);

  /* Status meanings: the same in every module and every theme. Always icon + word. */
  --rb-action-bg:#FEE2E2;   --rb-action:#991B1B;    /* needs action, errors */
  --rb-waiting-bg:#FEF3C7;  --rb-waiting:#92400E;   /* waiting on customer */
  --rb-progress-bg:#DBEAFE; --rb-progress:#1E40AF;  /* in progress */
  --rb-parts-bg:#F3E8FF;    --rb-parts:#6B21A8;     /* parts or sublet */
  --rb-ready-bg:#DCFCE7;    --rb-ready:#166534;     /* ready or paid */
  --rb-closed-bg:#F3F4F6;   --rb-closed:#374151;    /* closed */

  --rb-font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --rb-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --rb-fs:15px; --rb-fs-sm:13px; --rb-fs-title:20px;
  --rb-s1:4px; --rb-s2:8px; --rb-s3:12px; --rb-s4:16px; --rb-s5:24px;
  --rb-r-card:8px; --rb-r:6px;
  --rb-field-h:40px;
  --rb-bar-h:56px; --rb-side-w:216px;
}
@media (max-width:860px){:root{--rb-fs:16px;--rb-field-h:44px;--rb-bar-h:52px}}

/* Visible focus ring on every control */
:focus-visible{outline:none;box-shadow:var(--rb-focus)}
a:focus-visible,button:focus-visible,summary:focus-visible{border-radius:var(--rb-r)}

/* Icons: 14–18px next to a word; decorative ones are aria-hidden */
.ic{flex-shrink:0;vertical-align:-.15em}

/* Status badges: icon + word */
.rb-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--rb-r);font-size:var(--rb-fs-sm);font-weight:600;line-height:1.5;white-space:nowrap;vertical-align:middle}
.rb-action{background:var(--rb-action-bg);color:var(--rb-action)}
.rb-waiting{background:var(--rb-waiting-bg);color:var(--rb-waiting)}
.rb-progress{background:var(--rb-progress-bg);color:var(--rb-progress)}
.rb-parts{background:var(--rb-parts-bg);color:var(--rb-parts)}
.rb-ready{background:var(--rb-ready-bg);color:var(--rb-ready)}
.rb-closed{background:var(--rb-closed-bg);color:var(--rb-closed)}

/* Error text under a field */
.rb-error{display:block;color:var(--rb-action);font-size:var(--rb-fs-sm);font-weight:600;margin-top:var(--rb-s1)}

@media print{
  :root{--rb-bg:#FFFFFF}
  .rb-badge{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}