/* ============================================================
   Law Cycles — shared design tokens + universal element styles.

   Loaded by every page via /static/theme.css. Each page may
   override or extend these in its own <style> block.

   Edit any colour or token here — all pages pick it up. Do not
   re-declare these tokens or badges in individual page styles.
   ============================================================ */

:root {
  --ink:     #1e3f7c;
  --paper:   #f7f5f2;
  --accent:  #d4420a;
  --accent2: #c53030;
  --muted:   #7a7570;
  --green:   #2a7a4b;

  /* Borders — softened to a hairline for lighter, more modern surface
     separation. --border-strong preserves the previous weight for any place
     that still wants a defined edge. (To revert: set --border back to
     #d8d3cc.) */
  --border:        #e7e2db;   /* was #d8d3cc */
  --border-strong: #d8d3cc;

  /* Radius scale. --radius bumped 10 → 12 for a friendlier, current feel;
     -sm for small controls, -lg for large cards/panels. Anything already
     using var(--radius) picks up the new value automatically. */
  --radius:    12px;          /* was 10px */
  --radius-sm: 8px;
  --radius-lg: 16px;

  /* Surfaces — give panels depth against the cream paper. */
  --surface:      #ffffff;
  --surface-sunk: #faf8f5;

  /* Soft, layered elevation, tinted with the navy ink so shadows read warm
     against the paper rather than muddy grey. Ready for cards/panels to adopt
     in the per-page (Tier 2) pass. */
  --shadow-sm: 0 1px 2px rgba(30,63,124,0.05), 0 1px 3px rgba(30,63,124,0.06);
  --shadow-md: 0 2px 6px rgba(30,63,124,0.06), 0 8px 20px rgba(30,63,124,0.07);
  --shadow-lg: 0 12px 32px rgba(30,63,124,0.14);

  /* Card elevation — values shared verbatim with the marketing site
     (LawCyclesSite global.css) so cards look identical across both surfaces.
     --shadow-card is the resting state; --shadow-card-hover the lift. */
  --shadow-card:       0 6px 20px rgba(30, 63, 124, 0.07);
  --shadow-card-hover: 0 10px 28px rgba(30, 63, 124, 0.12);

  /* Soft focus ring — applied globally below. */
  --focus-ring: 0 0 0 3px rgba(30,63,124,0.16);
}

/* Universal element reset — every page used this verbatim. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Global type scale: every page sizes its text in rem, which resolves
   against this root size — 19px (vs the 16px browser default) lifts all
   text ~20% platform-wide. Page body baselines are rem too, so they scale
   in step. Retune the whole app's type by changing this one number. */
html { font-size: 19px; }

/* Body baseline. Per-page styles may set min-height / padding / etc. */
html, body {
  font-family: 'Barlow', sans-serif;
  background:  var(--paper);
  color:       var(--ink);
}

/* Global focus affordance — a soft ring on top of whatever border colour each
   page sets on focus. Element selectors, so it cascades to every page without
   touching per-page CSS. Improves polish and keyboard accessibility (the
   previous styles only changed the border colour, with no ring). */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Status badges — used by every page that surfaces a booking status.
   Colours match the original per-page copies exactly so existing
   visual references stay identical. */
.badge {
  font-family:    'Barlow Condensed', sans-serif;
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:        3px 9px;
  border-radius:  14px;
  display:        inline-block;
}
.badge-pending     { background: #fef3c7; color: #92400e; }
.badge-confirmed   { background: #d1fae5; color: #065f46; }
.badge-active      { background: #dbeafe; color: #1e40af; }
.badge-in_progress { background: #dbeafe; color: #1e40af; }
/* bike_received: bike is physically in the shop (deposit captured),
   awaiting quote/work. Teal — distinct from in_progress blue. */
.badge-bike_received { background: #ccfbf1; color: #115e59; }
/* Customer quote workflow — see customer_quote_migration.sql.
   quoted             : indigo, "waiting on the customer to respond"
   customer_approved  : bright green, "good to start"
   customer_declined  : amber/red, "shop needs to call the customer" */
.badge-quoted              { background: #e0e7ff; color: #3730a3; }
.badge-customer_approved   { background: #bbf7d0; color: #14532d; }
.badge-customer_declined   { background: #fed7aa; color: #9a3a08; }
/* ready_for_collection: amber/orange. Distinct from in_progress (blue)
   and pending (yellow); signals "needs the shop's attention because
   the customer is waiting to come in and collect". */
.badge-ready_for_collection { background: #fed7aa; color: #9a3a08; }
.badge-completed   { background: #e5e7eb; color: #374151; }
.badge-cancelled   { background: #fee2e2; color: #991b1b; }
/* no_show: customer never arrived + deposit auto-captured. Maroon/brown to
   read as "resolved but a loss", distinct from cancelled (bright red). */
.badge-no_show     { background: #ede9e3; color: #7c2d12; }
.badge-mixed       { background: #fde68a; color: #78350f; }