/* Booking Page — design tokens.
 *
 * Two surfaces share these: a light-first public booking page (calm, the accent
 * does the work — think Calendly/Cal.com done tastefully) and a dark-first owner
 * console (a quiet instrument, like Linear). Re-skin by editing tokens here; no
 * component reads a raw color. The public page overrides --brand at runtime from
 * settings.accent.
 */

:root {
  --bg:          #ffffff;
  --bg-tint:     #f6f7f9;
  --surface:     #ffffff;
  --surface-2:   #f8f9fb;
  --surface-3:   #eef1f5;
  --border:      rgba(18, 22, 32, 0.10);
  --border-soft: rgba(18, 22, 32, 0.06);
  --hairline:    rgba(18, 22, 32, 0.08);
  --scrim:       rgba(12, 16, 24, 0.45);

  --text:        #121620;
  --text-dim:    #565d6b;
  --text-faint:  #8a909c;

  /* Brand — overridden at runtime on the booking page from settings.accent */
  --brand:       #5b8def;
  --brand-soft:  rgba(91, 141, 239, 0.12);
  --brand-ink:   #3f6fd8;
  --brand-fg:    #ffffff;

  --success:     #16a34a;
  --success-bg:  rgba(22, 163, 74, 0.10);
  --warning:     #b45309;
  --warning-bg:  rgba(180, 83, 9, 0.10);
  --danger:      #dc2626;
  --danger-bg:   rgba(220, 38, 38, 0.10);
  --danger-fg:   #ffffff;

  --sans:        'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:        ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
  --radius-xl:   20px;

  --shadow-card: 0 1px 2px rgba(18, 22, 32, 0.04);
  --shadow-soft: 0 4px 20px -8px rgba(18, 22, 32, 0.18);
  --shadow-pop:  0 24px 60px -24px rgba(18, 22, 32, 0.28), 0 0 0 1px var(--border);

  --focus-ring:  var(--brand);
  --ease:        cubic-bezier(0.2, 0, 0, 1);
  --dur:         140ms;
}

:root[data-theme="dark"] {
  --bg:          #0b0d12;
  --bg-tint:     #12141b;
  --surface:     #101218;
  --surface-2:   #15171f;
  --surface-3:   #1b1e27;
  --border:      rgba(255, 255, 255, 0.09);
  --border-soft: rgba(255, 255, 255, 0.05);
  --hairline:    rgba(255, 255, 255, 0.07);
  --scrim:       rgba(0, 0, 0, 0.6);

  --text:        #e7e9ef;
  --text-dim:    #9aa0ad;
  --text-faint:  #686e7b;

  --brand-fg:    #ffffff;
  --success:     #22c55e;
  --success-bg:  rgba(34, 197, 94, 0.12);
  --warning:     #eab308;
  --warning-bg:  rgba(234, 179, 8, 0.12);
  --danger:      #ef4444;
  --danger-bg:   rgba(239, 68, 68, 0.12);

  --shadow-card: none;
  --shadow-soft: 0 8px 30px -12px rgba(0, 0, 0, 0.6);
  --shadow-pop:  0 24px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border);
}

html, body { background: var(--bg); color: var(--text); }
body {
  font-family: var(--sans);
  font-feature-settings: "cv11", "ss01";
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; color: var(--text); }
.mono { font-family: var(--mono); }
.tabular-nums { font-variant-numeric: tabular-nums; }
.label-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); font-weight: 600; }

::selection { background: var(--brand-soft); color: var(--text); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

*:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fade-up 320ms var(--ease) both; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.7s linear infinite; }