/* ════════════════════════════════════════════════════════════════════════
   Stevie & Lulu — shared brand tokens (2026-07-01g)
   ════════════════════════════════════════════════════════════════════════
   One source of truth for palette + type across ALL S&L pages (customer
   AND staff). See docs/BRAND-NOTES.md for the rationale.

   How to consume:
     <link rel="stylesheet" href="shared/brand.css">
   then reference var(--sl-*) in CSS, or mirror the hex values in JS style
   objects (frontdesk/playground do this — keep them in sync with here).

   Canonical palette (BRAND-NOTES.md; D-122 2026-07-08 aligned the blue to
   the live WP site — #cadcf0 "powder" is RETIRED):
     ink #0a0a0a · white #ffffff · sky blue #cbe9ff (hover #b9dbf5,
     soft #eef7ff) · muted grey #8a8a8a · hairline #e8e8e8
   Type: Mustard (display; licensed, embedded base64 per customer page —
   NOT on Google Fonts) · Onest (body). Never a paw print.

   Spacing rhythm: multiples of 4px — prefer 8 / 12 / 16 / 24 / 32 / 40 / 48.
   ──────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=Onest:wght@300;400;500;600;700&display=swap');

:root {
  /* Core palette */
  --sl-ink: #0a0a0a;
  --sl-white: #ffffff;
  --sl-blue: #cbe9ff;        /* sky blue — THE brand accent (matches the WP site, D-122) */
  --sl-blue-hover: #b9dbf5;
  --sl-blue-soft: #eef7ff;
  --sl-muted: #8a8a8a;
  --sl-border: #e8e8e8;

  /* Cool paper for staff-app backgrounds (replaces the old warm taupe) */
  --sl-paper: #f6f8fb;

  /* Semantic status — staff apps only; chrome stays in the core palette */
  --sl-success: #4f7a4a;
  --sl-warning: #c97e2e;
  --sl-danger: #a3393b;

  /* Type. Mustard is licensed + embedded base64 in each customer page
     (engine/visits/signup/spaview carry the @font-face); pages that only
     link this sheet without embedding fall back to Fraunces. */
  --sl-font-display: 'Mustard', 'Fraunces', Georgia, serif;
  --sl-font-body: 'Onest', system-ui, -apple-system, sans-serif;
}

/* Baseline for pages that link this sheet (staff apps). Customer pages
   (engine, visits, signup) carry their own equivalent rules inline. */
body {
  font-family: var(--sl-font-body);
  color: var(--sl-ink);
}

/* Reusable brand button spec — matches the WP site's CTA pill (punch 32e,
   2026-07-08: Onest 14/600/2px, black on brand blue, radius 3px 35px).
   Primary: blue pill · Ghost: ink outline. */
.sl-brand-btn {
  border: none; cursor: pointer;
  font-family: var(--sl-font-body); font-size: 14px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--sl-ink); background: var(--sl-blue);
  padding: 18px 40px; border-radius: 3px 35px; transition: background 0.2s;
}
.sl-brand-btn:hover:not(:disabled) { background: var(--sl-blue-hover); }
.sl-brand-btn:disabled { background: #eaeaea; color: #999; cursor: not-allowed; }
.sl-brand-btn-ghost {
  background: transparent; border: 1px solid var(--sl-ink);
}
.sl-brand-btn-ghost:hover:not(:disabled) { background: var(--sl-ink); color: var(--sl-white); }