/* ============================================================ Bok — design tokens (single source of truth). Monochrome, premium dark. Neutrals biased a touch warm so they read as chosen, not default grey. ============================================================ */ :root { --bg: #0b0a09; --surface: #161513; --surface-2: #201e1b; --surface-3: #2a2825; --line: #322f2b; --line-2: #3d3a35; --text: #f6f4f0; --body: #a7a39c; --muted: #726e66; --inverse: #0b0a09; --accent: #f6f4f0; /* monochrome: white on dark */ --success: #3f9e5a; --danger: #e5484d; --warn: #d6a24a; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-round: "SF Pro Rounded", ui-rounded, "Segoe UI", var(--font-ui); --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace; --shadow-sm: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 5px rgba(0,0,0,.35); --shadow-md: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px -4px rgba(0,0,0,.55); --shadow-lg: 0 1px 0 rgba(255,255,255,.07) inset, 0 16px 40px -8px rgba(0,0,0,.7); --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 24px 60px -30px rgba(0,0,0,.85); } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; } button { font-family: inherit; } ::selection { background: rgba(246,244,240,.18); } /* ---- Per-creator LIGHT theme for the public booking page ---- Opt-in: book.js sets data-theme="light" on . Custom properties set on the root override :root for the whole subtree, so the same components recolor coherently. A chosen brand accent (--accent/--inverse) is layered inline. */ :root[data-theme="light"] { --bg: #faf9f7; --surface: #ffffff; --surface-2: #f3f1ee; --surface-3: #eae7e1; --line: #e7e3dd; --line-2: #d8d3ca; --text: #1b1917; --body: #57534c; --muted: #8f8a80; --inverse: #ffffff; --accent: #1b1917; /* dark buttons on light — overridden if a brand colour is set */ --shadow-sm: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 5px rgba(0,0,0,.08); --shadow-md: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 20px -3px rgba(0,0,0,.12); --shadow-lg: 0 1px 0 rgba(255,255,255,.9) inset, 0 16px 36px -6px rgba(0,0,0,.18); --shadow: 0 1px 0 rgba(0,0,0,.02) inset, 0 20px 50px -30px rgba(0,0,0,.28); } :root[data-theme="light"] ::selection { background: rgba(0,0,0,.10); } /* ---- wordmark ---- */ .wordmark { font-family: var(--font-round); font-weight: 600; letter-spacing: -.02em; color: var(--text); } .wordmark .dot { color: var(--muted); } /* ---- layout ---- */ .page { min-height: 100vh; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s6); } .topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--s6) 0; } .topbar .brand { font-size: 26px; } .booker-bar { justify-content: center; padding: 18px 0 20px; } .booker-bar .brand { font-size: 27px; } .topbar-actions { display: flex; align-items: center; gap: var(--s4); color: var(--body); font-size: 13.5px; } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-pill); border: 1px solid transparent; padding: 10px 18px; font-size: 14px; font-weight: 550; cursor: pointer; transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .14s ease, background .15s ease, border-color .15s ease, color .15s ease; white-space: nowrap; position: relative; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(1px) scale(.985); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-primary { background: var(--accent); color: var(--inverse); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 3px 8px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.4); } .btn-primary:hover { background: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 20px -2px rgba(255,255,255,.25), 0 4px 10px rgba(0,0,0,.45); } .btn-primary:active { box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 1px 3px rgba(0,0,0,.5); } .btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--line); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 3px 8px rgba(0,0,0,.35); } .btn-secondary:hover { border-color: var(--line-2); background: var(--surface-3); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 16px rgba(0,0,0,.5); } .btn-secondary:active { box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 1px 2px rgba(0,0,0,.4); } .btn-ghost { background: transparent; color: var(--body); } .btn-ghost:hover { color: var(--text); background: var(--surface); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 4px 12px rgba(0,0,0,.3); } .btn-ghost:active { box-shadow: 0 1px 2px rgba(0,0,0,.2); } .btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in oklab, var(--danger) 40%, var(--line)); box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 2px 6px rgba(0,0,0,.25); } .btn-danger:hover { background: color-mix(in oklab, var(--danger) 14%, transparent); border-color: var(--danger); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 6px 16px color-mix(in oklab, var(--danger) 20%, transparent); } .btn-danger:active { box-shadow: 0 1px 2px rgba(0,0,0,.4); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .btn-sm { padding: 7px 13px; font-size: 13px; } .btn-block { width: 100%; } /* ---- form controls ---- */ label.field { display: block; margin-bottom: var(--s4); } label.field > .lbl { display: block; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .input, .textarea, .select { width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 13px; font-size: 14.5px; font-family: inherit; transition: border-color .15s ease, background .15s ease; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--line-2); background: var(--surface-2); } .textarea { resize: vertical; min-height: 84px; line-height: 1.55; } .input::placeholder, .textarea::placeholder { color: var(--muted); } .hint { color: var(--muted); font-size: 12.5px; margin-top: 6px; } /* ---- custom dropdown (replaces the native