/* * Owner workspace design tokens. * * Scoped to .owner-workspace so the Argon admin chrome around the panel * keeps its own styles. Mirrors the .am-page family (DM Sans, Stripe * purple #635bff, hairline borders, 8/12/16px radii) so every owner * tool reads as one product. * * Consumed by public/custom/css/reservation-panel/*.css — tokens only * live here, page styles live there. */ .owner-workspace, .ow-scope { /* ======================================================== * DESIGN CONTRACT (v2, aaatable × Purple pastel): * Base = black + white. Page & cards live on white/ink. * Accent = #635bff. Used ONLY for interactive states — * hover, focus ring, active pill, primary CTA. * Pastel = #C9BEFF (--ow-pastel-accent). Wash for * selected rows, hover backgrounds, chip fills, * gentle hero surfaces. Never a saturated slab. * Never: saturated purple slabs with white text. * Argon blue (#5e72e4). Legacy gradients. * The token set below drives every component; nothing in * component CSS should reference raw hex outside these. * ======================================================== */ /* Ink / neutrals — the base black + white */ --ow-ink: #0f172a; /* near-black — headlines, body */ --ow-body: #425466; /* body text muted */ --ow-muted: #6b7280; /* labels, hint text */ --ow-faint: #94a3b8; /* placeholder, disabled */ --ow-line: #e6e9eb; /* control borders */ --ow-line-soft: #f0f2f4; /* section dividers */ --ow-surface: #ffffff; /* cards, inputs */ --ow-sunken: #fafbfd; /* page bg — almost-white, no gray slab */ /* Brand accent — interactive-state only. User-canonical hex #635bff (slightly more blue-lavender than the Stripe purple #635bff we used before). */ --ow-brand: #635bff; --ow-brand-ink: #3b32d6; --ow-brand-hover: #4c46cc; --ow-brand-wash: color-mix(in srgb, var(--ow-brand, #635bff) 8%, transparent); --ow-banner-purple: #635bff; /* header hero background */ /* PASTEL — the C9BEFF the user pinned. Signature wash colour. */ --ow-pastel-accent: #C9BEFF; /* selected/hover row bg, chip fills */ --ow-pastel-accent-soft: #E8E0FF; /* softer variant, disabled-active */ --ow-pastel-accent-faint: #F5F1FF; /* barest tint, section backgrounds */ --ow-pastel-accent-ink: #4c1d95; /* dark ink readable ON pastel */ /* Kept as compat aliases for existing rules (mapped to pastel accent) */ --ow-brand-pastel: var(--ow-pastel-accent); --ow-brand-pastel-soft: var(--ow-pastel-accent-soft); /* Semantic states — flat washes, dark ink */ --ow-danger: #b91c1c; --ow-danger-hover: #9c1414; --ow-danger-wash: rgba(185, 28, 28, .08); --ow-success: #16a34a; --ow-success-wash: rgba(22, 163, 74, .10); --ow-warning: #d97706; --ow-warning-wash: rgba(217, 119, 6, .10); --ow-vip: #d4af37; --ow-vip-wash: rgba(212, 175, 55, .12); /* Type scale — DM Sans, tuned for owner UI density. */ --ow-fs-xs: 11px; --ow-fs-sm: 12.5px; --ow-fs-md: 13.5px; --ow-fs-lg: 15px; --ow-fs-xl: 18px; --ow-fs-2xl: 22px; --ow-fw-medium: 500; --ow-fw-semibold: 600; --ow-fw-bold: 700; /* Spatial scale */ --ow-sp-1: 4px; --ow-sp-2: 8px; --ow-sp-3: 12px; --ow-sp-4: 16px; --ow-sp-5: 20px; --ow-sp-6: 24px; --ow-sp-8: 32px; /* Radii — shape lock: use 16 for cards, 12 for controls, 999 for pills */ --ow-radius-sm: 8px; --ow-radius: 12px; --ow-radius-lg: 16px; --ow-radius-xl: 20px; --ow-radius-pill: 999px; /* Motion — Apple-style easing family. `--ow-ease` is the default; `--ow-ease-out` for enter states, `--ow-ease-hover` for hovers. */ --ow-ease: cubic-bezier(0.4, 0, 0.2, 1); --ow-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ow-ease-hover: cubic-bezier(0.32, 0.72, 0, 1); --ow-dur-fast: 140ms; --ow-dur: 200ms; --ow-dur-slow: 320ms; /* Apple-hover transform tokens — subtle lift, not cartoon bounce */ --ow-hover-lift: translateY(-1px); --ow-hover-scale: scale(1.02); --ow-hover-scale-tight: scale(1.015); --ow-active-press: scale(0.97); /* Focus + shadow atoms */ --ow-ring: 0 0 0 3px color-mix(in srgb, var(--ow-brand, #635bff) 18%, transparent); --ow-ring-danger: 0 0 0 3px rgba(185, 28, 28, .18); --ow-mono: "SF Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --ow-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px -8px rgba(15, 23, 42, .06); --ow-shadow-card-hover: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .10); --ow-shadow-pop: 0 12px 32px -8px rgba(15, 23, 42, .18); --ow-shadow-modal: 0 32px 72px -20px rgba(15, 23, 42, .30); /* ======================================================== * MIRROR-GLASS hero surface * Real backdrop-blur + layered translucent white + * catch-light top edge + PASTEL purple bottom-glow. * Applied via .ow-glass utility class (see owner-atom-kit.css). * ======================================================== */ --ow-glass-bg: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.55) 45%, color-mix(in srgb, var(--ow-brand, #635bff) 20%, transparent) 100%); --ow-glass-blur: saturate(1.4) blur(24px); --ow-glass-border: 1px solid rgba(255,255,255,.65); --ow-glass-ring: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -1px 0 color-mix(in srgb, var(--ow-brand, #635bff) 8%, transparent); --ow-glass-glow: 0 1px 2px rgba(15,23,42,.04), 0 24px 56px -20px color-mix(in srgb, var(--ow-brand, #635bff) 30%, transparent), 0 8px 24px -12px rgba(15,23,42,.08); --ow-glass-glow-hover: 0 1px 2px rgba(15,23,42,.04), 0 32px 68px -18px color-mix(in srgb, var(--ow-brand, #635bff) 42%, transparent), 0 12px 28px -12px rgba(15,23,42,.10); /* ======================================================== * Vendor theme picker hook (--ow-accent). * Every interactive component (primary button, active nav, * focus ring, hero glow) resolves its brand via var(--ow-accent). * Default = aaatable purple. * * To swap for a specific vendor at runtime: * * or an inline override on /: * * ======================================================== */ --ow-accent: var(--ow-brand); --ow-accent-ink: var(--ow-brand-ink); --ow-accent-hover: var(--ow-brand-hover); --ow-accent-wash: var(--ow-brand-wash); /* Control heights */ --ow-control-h-sm: 30px; --ow-control-h: 36px; --ow-control-h-lg: 44px; --ow-rail-w: 220px; font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ow-ink); box-sizing: border-box; } /* Page bg — flat near-white PLUS a very faint pastel wash at top-right. User wanted to kill the loud radial gradient; keeping a barely-there .18-opacity wash so glass cards (backdrop-blur) have real content to blur AND so .card.bg-secondary Argon shells don't melt into body. */ .owner-workspace { background: radial-gradient(ellipse 900px 700px at 90% 0%, color-mix(in srgb, var(--ow-brand, #635bff) 18%, transparent) 0%, transparent 60%), var(--ow-sunken) !important; background-attachment: fixed; } .owner-workspace *, .owner-workspace *::before, .owner-workspace *::after, .ow-scope *, .ow-scope *::before, .ow-scope *::after { box-sizing: inherit; } /* Cascade DM Sans to when owner-workspace is active anywhere in the document (so body-level content like appended modals, popovers, tooltips also render with the brand font). Modern :has() selector — graceful degradation: falls back to Quicksand where :has() unsupported. */ body:has(.owner-workspace), html:has(.owner-workspace) body { font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; } /* Every interactive element gets the shared focus ring. */ .owner-workspace :is(button, a, input, select, textarea, [tabindex]):focus-visible, .ow-scope :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--ow-ring); } /* ============================================================ * Vendor theme presets — pick via body class or vendor setting. * Each preset re-defines --ow-accent + its ink/hover/wash pair. * Add new palettes here; nothing in components needs to change. * * Runtime activation: * * * * ============================================================ */ .owner-workspace.ow-theme-emerald, .ow-theme-emerald.owner-workspace { --ow-accent: #10b981; --ow-accent-ink: #047857; --ow-accent-hover: #059669; --ow-accent-wash: rgba(16,185,129,.10); --ow-brand: #10b981; --ow-brand-ink: #047857; --ow-brand-hover: #059669; --ow-pastel-accent: #A7F3D0; --ow-pastel-accent-soft: #D1FAE5; --ow-pastel-accent-faint: #ECFDF5; } .owner-workspace.ow-theme-rose, .ow-theme-rose.owner-workspace { --ow-accent: #f43f5e; --ow-accent-ink: #be123c; --ow-accent-hover: #e11d48; --ow-accent-wash: rgba(244,63,94,.10); --ow-brand: #f43f5e; --ow-brand-ink: #be123c; --ow-brand-hover: #e11d48; --ow-pastel-accent: #FECDD3; --ow-pastel-accent-soft: #FEE2E2; --ow-pastel-accent-faint: #FFF1F2; } .owner-workspace.ow-theme-ocean, .ow-theme-ocean.owner-workspace { --ow-accent: #0ea5e9; --ow-accent-ink: #0369a1; --ow-accent-hover: #0284c7; --ow-accent-wash: rgba(14,165,233,.10); --ow-brand: #0ea5e9; --ow-brand-ink: #0369a1; --ow-brand-hover: #0284c7; --ow-pastel-accent: #BAE6FD; --ow-pastel-accent-soft: #DBEAFE; --ow-pastel-accent-faint: #EFF6FF; } .owner-workspace.ow-theme-amber, .ow-theme-amber.owner-workspace { --ow-accent: #f59e0b; --ow-accent-ink: #b45309; --ow-accent-hover: #d97706; --ow-accent-wash: rgba(245,158,11,.10); --ow-brand: #f59e0b; --ow-brand-ink: #b45309; --ow-brand-hover: #d97706; --ow-pastel-accent: #FDE68A; --ow-pastel-accent-soft: #FEF3C7; --ow-pastel-accent-faint: #FFFBEB; }