/* ================================================================ * BAUBOT BRAND TOKENS — shared design system for the marketing landing * * This is a STANDALONE copy of the brand-critical tokens from the app's * design system (apps/frontend/src/styles/globals.css `@theme` block + * `:root[data-theme="dark"]` override). The landing is plain static HTML * (no Tailwind), so the tokens are plain CSS custom properties here. * * ⚠️ KEEP IN SYNC with apps/frontend/src/styles/globals.css. If the brand * changes (accent hue, dark palette, fonts), update BOTH files. The app * is the source of truth; this file mirrors its values. * * Light is the default; dark applies when (set by * the same FOUC script the app uses, sharing the `baubot-theme` localStorage * key so the choice carries over to app.baubot.co). * ================================================================ */ :root { /* ── Color · LIGHT (default) ─────────────────────────────────── */ --color-bg: #fafaf9; --color-surface: #ffffff; --color-surface-2: oklch(0.975 0.003 60); --color-surface-3: oklch(0.95 0.004 60); --color-border: oklch(0.915 0.004 60); --color-border-strong: oklch(0.83 0.005 60); --color-text: oklch(0.14 0.005 260); --color-text-dim: oklch(0.42 0.006 260); --color-text-muted: oklch(0.6 0.005 260); /* Teal accent — petrol/teal brand (hue 195). */ --color-accent: oklch(0.52 0.085 195); --color-accent-hover: oklch(0.46 0.09 195); --color-accent-fg: #ffffff; --color-accent-soft: oklch(0.95 0.028 195); --color-accent-soft-fg: oklch(0.43 0.085 195); --color-focus: oklch(0.52 0.085 195 / 0.35); /* Semantic */ --color-success: oklch(0.55 0.13 152); --color-success-soft: oklch(0.94 0.045 152); --color-warning: oklch(0.62 0.15 60); --color-warning-soft: oklch(0.95 0.06 70); --color-danger: oklch(0.55 0.19 25); --color-danger-soft: oklch(0.94 0.05 22); --color-info: oklch(0.55 0.11 230); --color-info-soft: oklch(0.94 0.035 230); /* Korrekturarbeit highlight (matches Excel "Bad" cell colour family) */ --color-korrektur: oklch(0.91 0.055 18); --color-korrektur-fg: oklch(0.43 0.17 25); /* Brand "signal" highlight — the landing uses this for the BauBot mark * tile, the online dots, and live/done status pills. Pinned to the app's * teal accent so the brand reads identically across landing + app. */ --highlight: var(--color-accent); --highlight-fg: var(--color-accent-fg); --highlight-soft: var(--color-accent-soft); --highlight-soft-fg: var(--color-accent-soft-fg); /* ── Typography ──────────────────────────────────────────────── */ --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ── Radius ──────────────────────────────────────────────────── */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 9999px; /* ── Shadows (light mode — soft atmospheric) ─────────────────── */ --shadow-xs: 0 1px 2px rgba(20, 20, 40, 0.04); --shadow-sm: 0 1px 2px rgba(20, 20, 40, 0.04), 0 3px 8px rgba(20, 20, 40, 0.04); --shadow-md: 0 2px 4px rgba(20, 20, 40, 0.04), 0 12px 28px rgba(20, 20, 40, 0.06); --shadow-lg: 0 6px 14px rgba(20, 20, 40, 0.06), 0 28px 60px rgba(20, 20, 40, 0.08); --shadow-xl: 0 12px 24px rgba(20, 20, 40, 0.08), 0 48px 96px rgba(20, 20, 40, 0.12); } /* ================================================================ * DARK THEME OVERRIDE — applied when . * ================================================================ */ :root[data-theme="dark"] { --color-bg: oklch(0.115 0.004 260); --color-surface: oklch(0.145 0.004 260); --color-surface-2: oklch(0.175 0.005 260); --color-surface-3: oklch(0.215 0.005 260); --color-border: oklch(0.24 0.005 260); --color-border-strong: oklch(0.34 0.006 260); --color-text: oklch(0.97 0.003 260); --color-text-dim: oklch(0.74 0.005 260); --color-text-muted: oklch(0.54 0.005 260); --color-accent: oklch(0.72 0.1 195); --color-accent-hover: oklch(0.79 0.1 195); --color-accent-fg: oklch(0.15 0.03 195); --color-accent-soft: oklch(0.3 0.055 195); --color-accent-soft-fg: oklch(0.86 0.07 195); --color-focus: oklch(0.72 0.1 195 / 0.4); --color-success: oklch(0.73 0.16 152); --color-success-soft: oklch(0.3 0.06 152); --color-warning: oklch(0.78 0.14 70); --color-warning-soft: oklch(0.32 0.07 70); --color-danger: oklch(0.72 0.17 25); --color-danger-soft: oklch(0.32 0.08 25); --color-info: oklch(0.74 0.11 230); --color-info-soft: oklch(0.3 0.05 230); --color-korrektur: oklch(0.42 0.13 18); --color-korrektur-fg: oklch(0.93 0.05 22); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 18px rgba(0, 0, 0, 0.45), 0 24px 48px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.5), 0 40px 80px rgba(0, 0, 0, 0.5); }