/* ============================================================================
   Design system — the chassis every storefront skin is built on.
   Loaded AFTER bootstrap.min.css on the site + staff surfaces. (Admin ships
   its own self-contained token set in admin/admin.css.)

   Direction: warm paper, soft edges, editorial weight. A low-chroma paper
   canvas that white cards sit ON rather than dissolve into, one characterful
   variable grotesque (Bricolage) doing display duty, a neutral workhorse
   (Inter) doing UI, and a mono carrying every number, label and status line.

   On neutrals: the canvas is warm but barely — a couple of points of chroma,
   nearer newsprint than cream. That is deliberate. Cream is a colour and it
   fights every cool or jewel brand, so a white-label chassis can't ship it;
   but a dead-cool grey reads clinical under food photography. This sits in
   between: warm enough to flatter a plate, neutral enough that the tenant's
   --primary is still the only real hue on the page.

   Structure is a paired system: a hairline defines an edge, a soft low-spread
   shadow lifts anything interactive. Every accent is derived with color-mix()
   from --primary, so the whole system re-tunes for ANY brand colour.

   Token names here are a contract — site.css, staff.css, the JS renderers and
   all sixteen skins read them. Change values freely; rename nothing.
   ============================================================================ */

:root {
  /* --- Brand (injected per-tenant as --primary / --secondary) ------------- */
  --brand: var(--primary);
  --brand-strong: color-mix(in srgb, var(--primary) 88%, #000);
  --brand-stronger: color-mix(in srgb, var(--primary) 74%, #000);
  --brand-ink: color-mix(in srgb, var(--primary) 76%, #000);   /* brand-as-text on light */
  --brand-wash: color-mix(in srgb, var(--primary) 6%, #fff);   /* barely-there fill */
  --brand-tint: color-mix(in srgb, var(--primary) 13%, #fff);
  --brand-tint-2: color-mix(in srgb, var(--primary) 22%, #fff);
  --brand-line: color-mix(in srgb, var(--primary) 36%, #fff);
  --brand-contrast: #fff;                                      /* text on solid brand */
  --brand-glow: color-mix(in srgb, var(--primary) 30%, transparent);
  --site-base-font-size: 16px;

  /* --- Neutral canvas (warm paper, ~2% chroma — see note above) ----------- */
  --paper: #f6f4f1;
  --surface: #ffffff;
  --surface-2: #efece7;
  --surface-3: #e5e1da;
  --line: #e6e2dc;
  --line-strong: #cdc7bd;
  --ink: #14120f;
  --ink-2: #55504a;
  --ink-3: #6e6862;   /* meets WCAG AA (~5:1) on --paper for small text */

  /* --- Semantic status (desaturated to sit beside any brand colour) ------- */
  --success: #16794f;      --success-bg: #e4f3ec;
  --danger:  #b3271b;      --danger-bg:  #fceceb;
  --warning: #8a5d0a;      --warning-bg: #f8efdb;
  --info:    #1f5f96;      --info-bg:    #e6eff7;

  /* --- Type ---------------------------------------------------------------
     Bricolage Grotesque carries display: it is variable on both weight and
     optical size, so a skin can push it wide and heavy for signage or keep it
     quiet, without loading a second face. Inter does UI, where neutrality
     beats personality. JetBrains Mono is the figure voice — its tabular
     digits are what keep price columns aligned. */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --brand-serif: var(--font-display); /* legacy alias — old markup used this */

  /* Tracking, as tokens: skins that swap in a wide face (Anton, Italiana) need
     to retune these together with the family, not per-component. */
  --track-display: -0.028em;
  --track-tight: -0.011em;
  --track-label: 0.14em;   /* mono uppercase micro-labels */

  /* --- Geometry — softer and more generous than the old squared set ------- */
  --r-xs: 7px;
  --r-sm: 11px;
  --r: 15px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --hair: 1px;

  /* --- Elevation — warm-tinted so shadows sit in the paper, not on it ----- */
  --shadow-xs: 0 1px 2px rgba(32, 26, 18, .05);
  --shadow-sm: 0 1px 2px rgba(32, 26, 18, .06), 0 4px 12px -8px rgba(32, 26, 18, .16);
  --shadow: 0 2px 6px -3px rgba(32, 26, 18, .09), 0 16px 36px -20px rgba(32, 26, 18, .28);
  --shadow-lg: 0 40px 80px -34px rgba(24, 18, 12, .44), 0 5px 14px -7px rgba(24, 18, 12, .12);
  --ring: 0 0 0 3px color-mix(in srgb, var(--primary) 34%, transparent);

  --transition: 180ms cubic-bezier(.22, .68, .28, 1);
  --transition-slow: 440ms cubic-bezier(.22, .68, .28, 1);

  /* --- Bootstrap variable remap — this is what re-skins BS components ----- */
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-secondary-color: var(--ink-2);
  --bs-tertiary-color: var(--ink-3);
  --bs-emphasis-color: var(--ink);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--line);
  --bs-heading-color: var(--ink);
  --bs-primary: var(--primary);
  --bs-primary-rgb: 0 0 0;   /* unused; components below set colour explicitly */
  --bs-link-color: var(--brand-ink);
  --bs-link-hover-color: var(--brand-stronger);
  --bs-border-radius: var(--r);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-border-radius-xl: var(--r-xl);
  --bs-focus-ring-color: color-mix(in srgb, var(--primary) 32%, transparent);
}

/* ---------------------------------------------------------------------------
   Base elements
   --------------------------------------------------------------------------- */
html { font-size: var(--site-base-font-size); }

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: var(--track-tight);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1.15;
  text-wrap: balance;   /* stops a one-word orphan on a wrapped heading */
}

/* The display face — old markup uses `.display-serif`; keep the hook. */
.display-serif,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1.02;
}

/* Body copy wants a measure. Left as an opt-in class so it never fights a
   skin that deliberately runs full-bleed text. */
.prose, .article__body { max-width: 68ch; line-height: 1.6; }

/* The mono voice. Every number the shopper compares — price, count, quantity,
   hours — is set in it so columns line up and figures read as data. */
.mono, .price, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Mono micro-label: eyebrows, section kickers, table heads, chips. */
.mono-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 500;
  color: var(--ink-3);
}

a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-stronger); }

::selection { background: color-mix(in srgb, var(--primary) 24%, #fff); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-xs);
}

hr { border-color: var(--line); opacity: 1; }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-family: var(--font-sans);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--r-sm);
  --bs-btn-padding-x: 1.15rem;
  --bs-btn-padding-y: 0.58rem;
  /* 44px is the accessible minimum for a touch target, and it is the floor
     here rather than a size that only --btn-lg reaches. */
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  letter-spacing: var(--track-tight);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition),
              background-color var(--transition), border-color var(--transition),
              color var(--transition);
}
.btn-lg { --bs-btn-border-radius: var(--r); --bs-btn-padding-x: 1.6rem; --bs-btn-padding-y: 0.8rem; --bs-btn-font-size: 1.02rem; min-height: 52px; }
/* .btn-sm stays visually small but keeps the 44px hit area via padding, so a
   dense toolbar is still usable on a phone. */
.btn-sm { --bs-btn-border-radius: var(--r-xs); --bs-btn-font-size: 0.85rem; }
/* Inline text buttons in nav/meta rows are links in disguise — exempt them,
   or every header row grows to 44px and the chrome balloons. */
.btn-link, .btn.btn-link { min-height: 0; }

.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-color: var(--brand-contrast);
  --bs-btn-hover-bg: var(--brand-strong);
  --bs-btn-hover-border-color: var(--brand-strong);
  --bs-btn-hover-color: var(--brand-contrast);
  --bs-btn-active-bg: var(--brand-stronger);
  --bs-btn-active-border-color: var(--brand-stronger);
  --bs-btn-active-color: var(--brand-contrast);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
  --bs-btn-disabled-color: var(--brand-contrast);
}
.btn-primary:hover { box-shadow: 0 6px 18px -8px var(--brand-glow); }
.btn-primary:active { transform: translateY(1px); }

.btn-outline-primary {
  --bs-btn-color: var(--brand-ink);
  --bs-btn-border-color: var(--brand-line);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-hover-color: var(--brand-contrast);
  --bs-btn-active-bg: var(--brand-strong);
  --bs-btn-active-border-color: var(--brand-strong);
  --bs-btn-active-color: var(--brand-contrast);
}

.btn-outline-secondary {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-bg: var(--surface);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: var(--surface-2);
  --bs-btn-active-color: var(--ink);
}

/* A soft "ghost" button used throughout the chrome. */
.btn-ghost {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--brand-tint);
  --bs-btn-hover-color: var(--brand-ink);
  --bs-btn-active-bg: var(--brand-tint-2);
  --bs-btn-font-weight: 600;
}

/* Quiet outline that still reads as a real control on the grey canvas. */
.btn-hairline {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-bg: var(--surface);
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: var(--surface-2);
  --bs-btn-active-color: var(--ink);
}

.btn-link { --bs-btn-color: var(--brand-ink); --bs-btn-hover-color: var(--brand-stronger); font-weight: 600; }
.btn:focus-visible { box-shadow: var(--ring); }

/* Utilities that Bootstrap hard-codes to the compiled palette. */
.bg-primary { background-color: var(--primary) !important; }
.text-primary, .link-primary { color: var(--brand-ink) !important; }
.text-bg-primary { background-color: var(--primary) !important; color: var(--brand-contrast) !important; }
.border-primary { border-color: var(--primary) !important; }
.text-secondary { color: var(--ink-2) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.bg-white { background-color: var(--surface) !important; }

/* ---------------------------------------------------------------------------
   Surfaces — cards, panels
   --------------------------------------------------------------------------- */
/* The paired system: a hairline draws the edge, a soft shadow lifts it off the
   paper. Both, not either — on a warm canvas a borderless card floats without
   an edge and a flat card sinks into it. */
.card {
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--line);
  --bs-card-border-radius: var(--r-lg);
  --bs-card-inner-border-radius: calc(var(--r-lg) - 1px);
  --bs-card-cap-bg: transparent;
  box-shadow: var(--shadow-xs);
}
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.card.shadow { box-shadow: var(--shadow) !important; }

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */
.form-label {
  font-family: var(--font-mono);
  font-weight: 500; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--ink-3); margin-bottom: 0.4rem;
}
.form-control, .form-select {
  border-color: var(--line-strong);
  border-radius: var(--r-sm);
  padding: 0.62rem 0.85rem;
  background-color: var(--surface);
  color: var(--ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control::placeholder { color: var(--ink-3); }
.form-control:focus, .form-select:focus {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line-strong));
  box-shadow: var(--ring);
}
.form-text { color: var(--ink-3); }
.input-group > .btn { border-color: var(--line-strong); }
/* Money and quantity inputs are figures — set them like figures. */
input[type="number"], .form-control.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.form-check-input { border-color: var(--line-strong); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { border-color: color-mix(in srgb, var(--primary) 55%, var(--line-strong)); box-shadow: var(--ring); }

/* ---------------------------------------------------------------------------
   Badges, pills, list groups, tables, modals, offcanvas
   --------------------------------------------------------------------------- */
.badge {
  font-family: var(--font-mono); font-weight: 500;
  letter-spacing: 0.03em; border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.badge.text-bg-primary, .badge.bg-primary { background-color: var(--primary) !important; color: var(--brand-contrast) !important; }

.nav-pills {
  --bs-nav-pills-border-radius: var(--r-pill);
  --bs-nav-pills-link-active-bg: var(--primary);
  --bs-nav-pills-link-active-color: var(--brand-contrast);
}
.nav-pills .nav-link { color: var(--ink-2); font-weight: 600; }
.nav-pills .nav-link:hover { color: var(--brand-ink); }

.list-group {
  --bs-list-group-border-color: var(--line);
  --bs-list-group-active-bg: var(--primary);
  --bs-list-group-active-border-color: var(--primary);
  --bs-list-group-color: var(--ink);
}

.table {
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--line);
  --bs-table-hover-bg: color-mix(in srgb, var(--primary) 5%, transparent);
}
.table > thead { color: var(--ink-3); }
.table > thead th {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--track-label);
}

.modal-content {
  border: var(--hair) solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background: var(--surface);
}
.modal-header, .modal-footer { border-color: var(--line); }
.offcanvas { background: var(--surface); color: var(--ink); }
.offcanvas-header { border-color: var(--line); }

.btn-close:focus { box-shadow: var(--ring); }

/* ---------------------------------------------------------------------------
   Legacy hook classes still emitted by JS renderers across surfaces
   --------------------------------------------------------------------------- */
.error, .group-error { color: var(--danger); }
.loading { color: var(--ink-2); }
.muted, .line-meta { color: var(--ink-2); }

/* Status badge shared by account/admin/staff order cards. */
.status-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 500;
  background: var(--surface-2);
  color: var(--ink-2);
}

/* Respect reduced motion everywhere. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .btn-primary:hover { transform: none; }
}