/* Melanated Beauty Spa design system: tokens (PRD-005 S1).
 *
 * The one place a colour, face, size, space, corner, shadow or control height
 * is decided. Every surface stylesheet uses only these colours
 * (scripts/tests/test_design_system.py fails on any other hex), and the
 * contrast of every text and edge token is checked against each ground named
 * in its "text on:" / "edge on:" comment (4.5:1 for text, 3:1 for an edge).
 * Add a pairing there before using a token on a new ground.
 *
 * Shipped to the CRM and the portal by their deploy scripts into each app's
 * static/, linked before the app's own style.css, so reverting the link
 * reverts the surface. The components (S2) follow the tokens below.
 *
 * Densities: <html data-density="client"> (www, account, booking, pay,
 * tickets) and data-density="operator" (the CRM). Colours, faces and spacing
 * are the same in both; only sizes, corners and control heights differ.
 */

:root {
  /* Grounds */
  --mbs-ground: #f8f5f0;   /* cream page */
  --mbs-surface: #ffffff;  /* white sheet; text on: gold-500 gold-600 gold-700 dark-ground dark-sheet */
  --mbs-raised: #f3efe6;   /* tonal panel */

  /* Text */
  --mbs-ink: #1a1a1a;      /* text on: ground surface raised gold-100 gold-200 gold-300 gold-400 ok-bg warn-bg bad-bg neutral-bg */
  --mbs-muted: #5e594f;    /* text on: ground surface raised gold-100 gold-200 ok-bg warn-bg bad-bg neutral-bg */

  /* Gold. 300 is the client primary fill (ink text), 400 its hover; 500 marks, data and the
     focus ring; 600 links. 500 reads as text on cream and white only. */
  --mbs-gold-100: #f6efdc;
  --mbs-gold-200: #eadcb4;
  --mbs-gold-300: #d4a853; /* text on: dark-ground dark-sheet */
  --mbs-gold-400: #c99a40; /* the client primary fill on hover */
  --mbs-gold-500: #8b6914; /* text on: ground surface; edge on: raised gold-100 gold-200 dark-ground */
  --mbs-gold-600: #6f540f; /* text on: ground surface raised gold-100 gold-200 */
  --mbs-gold-700: #5c4509; /* text on: ground surface raised gold-100 gold-200 */

  /* Dark field: the CRM top bar, www dark bands, the booking page in dark mode */
  --mbs-dark-deep: #0d0d0d;
  --mbs-dark-ground: #1a1a1a;
  --mbs-dark-sheet: #2a2621;
  --mbs-dark-text: #f8f5f0;  /* text on: dark-ground dark-sheet */
  --mbs-dark-muted: #cfc6b4; /* text on: dark-ground dark-sheet */

  /* Status pairs: tint and its text */
  --mbs-ok-bg: #e4efe3;
  --mbs-ok-fg: #1d4d26;      /* text on: ok-bg ground surface */
  --mbs-warn-bg: #fdf3dc;
  --mbs-warn-fg: #6f4a00;    /* text on: warn-bg ground surface */
  --mbs-bad-bg: #fbe9e7;
  --mbs-bad-edge: #e6b3ac;
  --mbs-bad-fg: #7d1a14;     /* text on: bad-bg ground surface */
  --mbs-neutral-bg: #efebe3;
  --mbs-neutral-fg: #3d3a34; /* text on: neutral-bg ground surface */

  /* Lines */
  --mbs-border: #e6e0d2;
  --mbs-rule: #f0ebe1;
  --mbs-control-edge: #958a75; /* edge on: ground surface */

  /* Faces: Inter for all UI and body; Fraunces 600 only for display lines,
     client page titles, event titles and the wordmark. */
  --mbs-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mbs-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --mbs-weight-display: 600;

  /* Space */
  --mbs-space-1: 4px;
  --mbs-space-2: 8px;
  --mbs-space-3: 12px;
  --mbs-space-4: 16px;
  --mbs-space-5: 24px;
  --mbs-space-6: 32px;
  --mbs-space-7: 48px;
  --mbs-space-8: 64px;
  --mbs-space-9: 96px;

  /* Depth: nothing at rest; this only for sheets, menus and dialogs */
  --mbs-shadow-float: 0 8px 24px rgba(26, 26, 26, .12);
  /* Behind a dialog: the page, dimmed */
  --mbs-scrim: rgba(26, 26, 26, .45);

  /* Focus: 2px white then 2px gold-500 on every control */
  --mbs-focus-ring: 0 0 0 2px var(--mbs-surface), 0 0 0 4px var(--mbs-gold-500);

  /* Every target 44px or more where fingers point */
  --mbs-target-min: 44px;
}

/* Client density (also the default) */
:root,
[data-density="client"] {
  --mbs-size-small: 13px;
  --mbs-size-body: 16px;
  --mbs-size-lead: 20px;
  --mbs-size-title: 28px;
  --mbs-size-display: clamp(40px, 6vw, 72px);

  --mbs-radius-control: 999px;
  --mbs-radius-panel: 16px;
  --mbs-radius-inner: 8px;

  --mbs-control-height: 48px;
  --mbs-control-height-primary: 52px;
  --mbs-chip-height: 44px;

  --mbs-primary-fill: var(--mbs-gold-300);
  --mbs-primary-fill-hover: var(--mbs-gold-400);
  --mbs-primary-text: var(--mbs-ink);
  --mbs-control-pad: 24px;
}

/* Operator density (the CRM), as data health */
[data-density="operator"] {
  --mbs-size-small: 12px;
  --mbs-size-body: 14px;
  --mbs-size-lead: 16px;
  --mbs-size-title: 24px;
  --mbs-size-display: 32px; /* the lead figure */

  --mbs-radius-control: 6px;
  --mbs-radius-panel: 8px;
  --mbs-radius-inner: 6px;

  --mbs-control-height: 32px;
  --mbs-control-height-primary: 32px;
  --mbs-chip-height: 32px;

  --mbs-primary-fill: var(--mbs-ink);
  --mbs-primary-fill-hover: var(--mbs-neutral-fg);
  --mbs-primary-text: var(--mbs-surface);
  --mbs-control-pad: 12px;
}

@media (max-width: 1099px) {
  [data-density="operator"] {
    --mbs-control-height: 44px;
    --mbs-control-height-primary: 44px;
    --mbs-chip-height: 44px;
  }
}

/* ------------------------------------------------------------------------
 * Components (PRD-005 S2). Look only: each component sets its colours, type,
 * corners and control height from the tokens above; where it sits on the page
 * (margins, widths, grids) stays with the surface stylesheet that places it.
 * Old to new: buttons .btn + .btn-primary/-secondary/-quiet/-danger; status
 * badges and tags .pill + tone; flashes and alerts .notice + tone; cards
 * .panel / .panel-tone; inputs .input; filter chips .chip; tabs .tab.
 * scripts/tests/test_design_components.py keeps the old classes from coming
 * back and checks the focus ring is never overridden.
 * --------------------------------------------------------------------- */

/* Focus: the gold ring on every control reached by keyboard (AC-009): 2px of
   gold-500 outside a 2px white gap (a box-shadow). An outline, so no component's own
   box-shadow can hide it and forced-colours mode still draws it. No surface
   stylesheet sets its own :focus rule; a wrapper standing in for a hidden
   input uses :focus-within with --mbs-focus-ring. */
:root { accent-color: var(--mbs-gold-500); }
/* A component that sets display still hides with the hidden attribute. */
[hidden] { display: none !important; }
:focus-visible {
  outline: 2px solid var(--mbs-gold-500);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--mbs-surface);
}

/* Button: primary, secondary (the plain .btn look), quiet, danger. Busy: aria-busy="true" with a
   label that says what is happening. Disabled: say why in a .btn-reason line. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mbs-space-2);
  min-height: var(--mbs-control-height);
  padding: 0 var(--mbs-control-pad);
  border: 1px solid var(--mbs-control-edge);
  border-radius: var(--mbs-radius-control);
  background: var(--mbs-surface);
  color: var(--mbs-ink);
  font-family: var(--mbs-font-ui);
  font-size: var(--mbs-size-body);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.btn:hover { background: var(--mbs-raised); color: var(--mbs-ink); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  min-height: var(--mbs-control-height-primary);
  border-color: var(--mbs-primary-fill);
  background: var(--mbs-primary-fill);
  color: var(--mbs-primary-text);
}
.btn-primary:hover { border-color: var(--mbs-primary-fill-hover); background: var(--mbs-primary-fill-hover); color: var(--mbs-primary-text); }
.btn-quiet { border-color: transparent; background: transparent; color: var(--mbs-gold-600); }
.btn-quiet:hover { background: var(--mbs-raised); color: var(--mbs-gold-700); }
.btn-danger { border-color: var(--mbs-bad-fg); background: var(--mbs-surface); color: var(--mbs-bad-fg); }
.btn-danger:hover { border-color: var(--mbs-bad-fg); background: var(--mbs-bad-fg); color: var(--mbs-surface); }
.btn-small { padding: 0 var(--mbs-space-3); font-size: var(--mbs-size-small); }
.btn-block { display: flex; width: 100%; }
.btn:disabled,
.btn[aria-disabled="true"],
.btn:disabled:hover {
  border-color: var(--mbs-border);
  background: var(--mbs-raised);
  color: var(--mbs-muted);
  cursor: not-allowed;
  transform: none;
}
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: mbs-spin 800ms linear infinite;
}
@keyframes mbs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::before { animation: none; }
  .btn { transition: none; }
}
.btn-reason { margin: var(--mbs-space-1) 0 0; font-size: var(--mbs-size-small); color: var(--mbs-muted); }

/* Link row: a whole row that goes somewhere */
.link-row { display: flex; align-items: center; justify-content: space-between; gap: var(--mbs-space-3); min-height: var(--mbs-target-min); color: var(--mbs-ink); text-decoration: none; }
.link-row:hover { color: var(--mbs-gold-600); }

/* Field: label, input, hint, error. Read-only is [readonly]; an error sets
   aria-invalid="true" on the input. */
.field { display: grid; gap: var(--mbs-space-1); }
.field-label { font-size: var(--mbs-size-small); font-weight: 600; color: var(--mbs-ink); }
.field-hint { margin: 0; font-size: var(--mbs-size-small); color: var(--mbs-muted); }
.field-error { margin: 0; font-size: var(--mbs-size-small); font-weight: 600; color: var(--mbs-bad-fg); }
.input {
  min-height: var(--mbs-control-height);
  padding: 0 var(--mbs-space-3);
  border: 1px solid var(--mbs-control-edge);
  border-radius: var(--mbs-radius-inner);
  background: var(--mbs-surface);
  color: var(--mbs-ink);
  font-family: var(--mbs-font-ui);
  font-size: var(--mbs-size-body);
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
}
textarea.input { padding: var(--mbs-space-3); }
.input[aria-invalid="true"] { border-color: var(--mbs-bad-fg); }
.input[readonly] { background: var(--mbs-raised); color: var(--mbs-muted); cursor: default; }
.input:disabled { background: var(--mbs-raised); color: var(--mbs-muted); border-color: var(--mbs-border); }

/* Status pill: sentence case, small, pale tint, one per row (AC-010) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--mbs-space-1);
  padding: 2px var(--mbs-space-2);
  border-radius: 999px;
  background: var(--mbs-neutral-bg);
  color: var(--mbs-neutral-fg);
  font-size: var(--mbs-size-small);
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  vertical-align: middle;
}
.pill-ok { background: var(--mbs-ok-bg); color: var(--mbs-ok-fg); }
.pill-warn { background: var(--mbs-warn-bg); color: var(--mbs-warn-fg); }
.pill-bad { background: var(--mbs-bad-bg); color: var(--mbs-bad-fg); }
.pill-neutral { background: var(--mbs-neutral-bg); color: var(--mbs-neutral-fg); }
.pill-gold { background: var(--mbs-gold-100); color: var(--mbs-gold-700); }

/* Notice: info, ok, warn, bad. Links inside take the notice's colour. */
.notice {
  padding: var(--mbs-space-3) var(--mbs-space-4);
  border: 1px solid var(--mbs-border);
  border-radius: var(--mbs-radius-inner);
  background: var(--mbs-raised);
  color: var(--mbs-ink);
  font-size: var(--mbs-size-body);
  overflow-wrap: anywhere;
}
.notice a { color: inherit; font-weight: 600; }
.notice-info { border-color: var(--mbs-border); background: var(--mbs-raised); color: var(--mbs-ink); }
.notice-ok { border-color: var(--mbs-ok-bg); background: var(--mbs-ok-bg); color: var(--mbs-ok-fg); }
.notice-warn { border-color: var(--mbs-gold-200); background: var(--mbs-warn-bg); color: var(--mbs-warn-fg); }
.notice-bad { border-color: var(--mbs-bad-edge); background: var(--mbs-bad-bg); color: var(--mbs-bad-fg); }

/* Panel: the white sheet; tonal panel: the cream one inside it */
.panel {
  background: var(--mbs-surface);
  border: 1px solid var(--mbs-border);
  border-radius: var(--mbs-radius-panel);
  padding: var(--mbs-space-5);
}
.panel-tone {
  background: var(--mbs-raised);
  border: 1px solid var(--mbs-raised);
  border-radius: var(--mbs-radius-inner);
  padding: var(--mbs-space-3) var(--mbs-space-4);
}

/* Row: the shared list item, ruled from the one above */
.rows { list-style: none; margin: 0; padding: 0; }
.row { padding: var(--mbs-space-3) 0; border-top: 1px solid var(--mbs-rule); }
.row:first-child { border-top: 0; }

/* Chip: a filter or choice; the chosen one has aria-current or aria-pressed */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mbs-space-1);
  min-height: var(--mbs-chip-height);
  padding: 0 var(--mbs-space-4);
  border: 1px solid var(--mbs-control-edge);
  border-radius: 999px;
  background: var(--mbs-surface);
  color: var(--mbs-ink);
  font-family: var(--mbs-font-ui);
  font-size: var(--mbs-size-small);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.chip:hover { border-color: var(--mbs-gold-500); color: var(--mbs-ink); }
.chip[aria-current]:not([aria-current="false"]),
.chip[aria-pressed="true"] {
  border-color: var(--mbs-primary-fill);
  background: var(--mbs-primary-fill);
  color: var(--mbs-primary-text);
  font-weight: 600;
}

/* Tab: one of a few views of the same thing; the open one has aria-current
   or aria-selected */
.tabs { display: flex; border-bottom: 1px solid var(--mbs-border); }
.tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--mbs-control-height);
  padding: 0 var(--mbs-space-4);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  color: var(--mbs-muted);
  font-family: var(--mbs-font-ui);
  font-size: var(--mbs-size-body);
  font-weight: 600;
  text-decoration: none;
}
.tab:hover { color: var(--mbs-ink); }
.tab[aria-current]:not([aria-current="false"]),
.tab[aria-selected="true"] { color: var(--mbs-ink); border-bottom-color: var(--mbs-gold-500); }

/* Confirm sheet (S4): shared/static/mbs-confirm.js builds it in place of the
   browser's confirm dialog. The question, any detail, the money line, then the
   safe choice first. A centred dialog; under 640px a bottom sheet with the
   buttons full width. */
.confirm-sheet {
  box-sizing: border-box;
  width: min(480px, calc(100% - 2 * var(--mbs-space-4)));
  max-width: none;
  max-height: calc(100% - 2 * var(--mbs-space-4));
  overflow-y: auto;
  padding: var(--mbs-space-5);
  border: 1px solid var(--mbs-border);
  border-radius: var(--mbs-radius-panel);
  background: var(--mbs-surface);
  color: var(--mbs-ink);
  box-shadow: var(--mbs-shadow-float);
  font-family: var(--mbs-font-ui);
  font-size: var(--mbs-size-body);
  line-height: 1.5;
}
.confirm-sheet::backdrop { background: var(--mbs-scrim); }
.confirm-sheet-title { margin: 0 0 var(--mbs-space-2); color: var(--mbs-ink); font-family: var(--mbs-font-ui); font-size: var(--mbs-size-lead); font-weight: 600; line-height: 1.3; }
.confirm-sheet-detail p { margin: 0 0 var(--mbs-space-2); color: var(--mbs-muted); }
.confirm-sheet-money {
  margin: var(--mbs-space-3) 0 0;
  padding: var(--mbs-space-3) var(--mbs-space-4);
  border-radius: var(--mbs-radius-inner);
  background: var(--mbs-raised);
  font-weight: 600;
}
.confirm-sheet-actions { display: flex; flex-wrap: wrap; gap: var(--mbs-space-2); margin-top: var(--mbs-space-5); }
@media (max-width: 639.98px) {
  .confirm-sheet {
    width: 100%;
    max-height: 90%;
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: var(--mbs-radius-panel) var(--mbs-radius-panel) 0 0;
    padding-bottom: calc(var(--mbs-space-5) + env(safe-area-inset-bottom, 0px));
  }
  .confirm-sheet-actions { flex-direction: column; }
  .confirm-sheet-actions .btn { width: 100%; }
}

/* Menu sheet (S6): a <details class="menu"> whose <summary> opens a sheet of
   link rows (.menu-sheet > .link-row.menu-link). It opens and closes without
   script; each base.html adds Escape, a tap outside and a followed link. The
   surface decides where its top bar folds into it (the account under 1024px,
   the CRM under 1100px; both "under 900px", AC-012). Signed in on a phone,
   .menu-places are the bottom bar's and leave the sheet. */
details.menu { position: static; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
/* Open, the summary also draws a scrim; a tap on it closes the sheet. */
details.menu[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 0; background: var(--mbs-scrim); cursor: default; }
.menu-sheet {
  position: absolute;
  z-index: 1;
  top: calc(100% + var(--mbs-space-1));
  right: var(--mbs-space-3);
  display: flex;
  flex-direction: column;
  width: min(320px, calc(100vw - 2 * var(--mbs-space-3)));
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  padding: var(--mbs-space-2) var(--mbs-space-4);
  background: var(--mbs-surface);
  border: 1px solid var(--mbs-border);
  border-radius: var(--mbs-radius-panel);
  box-shadow: var(--mbs-shadow-float);
  font-family: var(--mbs-font-ui);
  font-size: var(--mbs-size-body);
}
.menu-places { display: flex; flex-direction: column; border-bottom: 1px solid var(--mbs-rule); margin-bottom: var(--mbs-space-1); padding-bottom: var(--mbs-space-1); }
.menu-link { min-height: var(--mbs-control-height); font-weight: 500; }
.menu-link[aria-current="page"] { color: var(--mbs-gold-600); font-weight: 600; }

/* Phone bottom bar (S6): signed in, under 640px, a surface's main places
   (<body class="has-tabbar">, <nav class="tabbar"> of .tabbar-link). */
.tabbar { display: none; }
@media (max-width: 639.98px) {
  .menu-sheet { right: var(--mbs-space-3); left: var(--mbs-space-3); width: auto; }
  .has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .has-tabbar .menu-places { display: none; }
  .has-tabbar .tabbar {
    position: fixed;
    z-index: 90;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--mbs-surface);
    border-top: 1px solid var(--mbs-border);
  }
  .tabbar-link {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 60px;
    padding: 0 2px;
    border-top: 3px solid transparent;
    color: var(--mbs-muted);
    font-family: var(--mbs-font-ui);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
  }
  .tabbar-link[aria-current="page"] { color: var(--mbs-ink); font-weight: 600; border-top-color: var(--mbs-gold-600); }
  .tabbar-icon { width: 22px; height: 22px; }
}