/* * webmoz.ai Design System — Colors & Typography * Source: firebase-app/public/styles/core/tokens.css (as documented) * Theme toggled via data-wm-theme="dark"|"light" on * Default theme: dark */ /* ─── Google Fonts ─── */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Inconsolata:wght@400;700&family=Lato:ital,wght@0,400;0,700;1,400&display=swap'); /* ─── Larken — Brand Display Font (curated weights) ─── */ @font-face { font-family: "Larken"; src: url("fonts/Larken-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Larken"; src: url("fonts/Larken-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Larken"; src: url("fonts/Larken-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Larken"; src: url("fonts/Larken-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Larken"; src: url("fonts/Larken-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Larken"; src: url("fonts/Larken-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Larken"; src: url("fonts/Larken-ExtraBold.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; } /* ─── Font Stacks ─── */ :root { --font-display: "Larken", Georgia, serif; --font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "Inconsolata", "Fira Mono", "Courier New", monospace; --font-lato: "Lato", sans-serif; } /* ─── Spacing Scale ─── */ :root { --wm-space-1: 4px; --wm-space-2: 8px; --wm-space-3: 12px; --wm-space-4: 16px; --wm-space-5: 20px; --wm-space-6: 24px; --wm-space-7: 32px; --wm-space-8: 40px; } /* ─── Border Radius Scale ─── */ :root { --wm-radius-xs: 4px; --wm-radius-sm: 6px; --wm-radius-md: 10px; --wm-radius-lg: 16px; --wm-radius-xl: 20px; --wm-radius-pill: 999px; } /* ─── Shadow Scale ─── */ :root { --wm-shadow-sm: 0 1px 2px rgba(0,0,0,0.12); --wm-shadow-md: 0 4px 24px rgba(0,0,0,0.18); --wm-shadow-glow-accent: 0 0 12px rgba(99,102,241,0.25); --wm-shadow-sidebar: 0px 0px 10px 10px rgba(123,173,241,0.3); } /* ─── Motion Tokens ─── */ :root { --wm-duration-instant: 0.1s; --wm-duration-fast: 0.15s; --wm-duration-med: 0.25s; --wm-duration-slow: 0.35s; --wm-ease-out: cubic-bezier(0.33, 1, 0.68, 1); --wm-ease-in-out: ease; } /* ─── Z-Index Layers ─── */ :root { --wm-z-modal: 1000; --wm-z-modal-chrome: 1001; --wm-z-sidebar: 1005; --wm-z-dock: 1200; --wm-z-tooltip: 10005; --wm-z-popover: 100000; } /* ─── Dark Theme (default) ─── */ :root, [data-wm-theme="dark"] { /* Page */ --wm-color-page: #05060a; /* Surfaces */ --wm-color-surface-0: rgba(20,20,35,0.4); --wm-color-surface-1: rgba(20,20,35,0.2); --wm-color-surface-elevated: rgb(20 24 38 / 72%); /* Text */ --wm-color-text: rgba(255,255,255,0.92); --wm-color-text-muted: rgba(255,255,255,0.65); /* Border */ --wm-color-border: rgba(99,102,241,0.25); /* Accent */ --wm-color-accent: #136df4; --wm-color-accent-hover: #1d4ed8; --wm-color-accent-soft: rgb(123,173,241); /* Semantic */ --wm-color-success: rgb(52,211,153); --wm-color-danger: rgb(239,68,68); --wm-color-focus-ring: rgba(99,102,241,0.35); /* Artifact / Modal */ --wm-artifact-backdrop: rgba(8,12,29,0.38); --wm-artifact-border: rgb(63,81,157,68%); /* Dashboard palette */ --dash-bg: #0b0f16; --dash-panel: rgba(255,255,255,0.06); --dash-panel-2: rgba(255,255,255,0.03); --dash-text: #e7eef7; --dash-muted: #9eb1cc; --dash-accent-1: #0ea5e9; --dash-accent-2: #22d3ee; --dash-accent-3: #60a5fa; --dash-accent-green: #22c55e; /* Progress rings */ --ring-1: #22c55e; --ring-2: #1976d2; --ring-3: #2196f3; --ring-4: #00d9ff; --ring-5: #ff8c69; /* Dock */ --wmz-dock-bg: #060010; --wmz-dock-panel-height: 68px; --wmz-dock-base-size: 50px; --wmz-dock-max-size: 70px; --wmz-dock-distance: 200px; /* Shiny CTA */ --shiny-cta-bg: #136df4; --shiny-cta-bg-from: #061c3d; --shiny-cta-bg-to: #1d5cbb; --shiny-cta-bg-subtle: #0c2d5c; --shiny-cta-fg: #ffffff; --shiny-cta-highlight: #93c5fd; --shiny-cta-highlight-subtle: #60a5fa; /* Legacy palette */ --dark-blue-background: #020016; --black-blue-black: #01000d; --wm-primary-blue: #00203f; --sidebar-bg: #071025; --bg-card: #121d3f; --border-card: #5371cf; --text-blue: #4aa8f2; --peach: #fe8963; --lellow: #ffed87; --og-light-border: rgba(123,173,241,0.67); --blue-shadow: rgba(123,173,241,0.3); --webflow-blue: rgba(123,173,241,0.25); /* Shadows override */ --wm-shadow-sm: 0 1px 2px rgba(0,0,0,0.12); --wm-shadow-md: 0 4px 24px rgba(0,0,0,0.18); } /* ─── Light Theme ─── */ [data-wm-theme="light"] { --wm-color-page: #f1f5f9; --wm-color-surface-0: rgba(255,255,255,0.92); --wm-color-surface-1: rgba(248,250,252,0.88); --wm-color-surface-elevated: #ffffff; --wm-color-text: rgba(15,23,42,0.94); --wm-color-text-muted: rgba(15,23,42,0.58); --wm-color-border: rgba(37,99,235,0.22); --wm-color-accent: #2563eb; --wm-color-accent-hover: #1d4ed8; --wm-color-accent-soft: rgb(96,165,250); --wm-artifact-backdrop: rgba(148,163,184,0.25); --wm-artifact-border: rgba(59,130,246,0.35); --wmz-dock-bg: #ffffff; --shiny-cta-bg: #2563eb; --shiny-cta-bg-from: #1e3a8a; --shiny-cta-bg-to: #3b82f6; --shiny-cta-bg-subtle: #dbeafe; --shiny-cta-highlight-subtle: #3b82f6; --wm-shadow-sm: 0 1px 2px rgba(15,23,42,0.06); --wm-shadow-md: 0 8px 30px rgba(15,23,42,0.1); } /* ─── Typography Utilities ─── */ .wm-display { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; } .wm-h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.1; color: var(--wm-color-text); } .wm-h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; line-height: 1.2; color: var(--wm-color-text); } .wm-h3 { font-family: var(--font-ui); font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--wm-color-text); } .wm-body { font-family: var(--font-ui); font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--wm-color-text); } .wm-body-sm { font-family: var(--font-ui); font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--wm-color-text); } .wm-muted { color: var(--wm-color-text-muted); font-size: 0.92em; } .wm-section-label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wm-color-text-muted); } .wm-code { font-family: var(--font-mono); font-size: 0.875em; background: rgba(19,109,244,0.12); color: var(--wm-color-accent-soft); padding: 2px 6px; border-radius: var(--wm-radius-xs); } .wm-code-block { font-family: var(--font-mono); font-size: 13px; background: rgba(0,0,0,0.35); border: 1px solid var(--wm-color-border); border-radius: var(--wm-radius-sm); padding: var(--wm-space-4); overflow-x: auto; color: var(--wm-color-text); line-height: 1.6; } /* ─── Layout Utilities ─── */ .wm-stack { display: flex; flex-direction: column; gap: 12px; } .wm-row { display: flex; flex-direction: row; align-items: center; gap: 8px; } /* ─── Card Surface ─── */ .wm-card-surface { border-radius: var(--wm-radius-md); border: 1px solid var(--wm-color-border); background: var(--wm-color-surface-elevated); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* ─── Glass Card ─── */ .wm-glass { background: var(--wm-color-surface-0); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--wm-color-border); border-radius: var(--wm-radius-md); box-shadow: var(--wm-shadow-md); } /* ─── Section Label Utility ─── */ .wm-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wm-color-text-muted); font-family: var(--font-ui); } /* ─── Scrollbar ─── */ :root, [data-wm-theme="dark"] { --wm-scrollbar-size: 10px; --wm-scrollbar-track: transparent; --wm-scrollbar-thumb: rgba(123, 173, 241, 0.22); --wm-scrollbar-thumb-hover: rgba(123, 173, 241, 0.42); --wm-scrollbar-thumb-active: rgba(19, 109, 244, 0.58); } [data-wm-theme="light"] { --wm-scrollbar-thumb: rgba(37, 99, 235, 0.2); --wm-scrollbar-thumb-hover: rgba(37, 99, 235, 0.36); --wm-scrollbar-thumb-active: rgba(37, 99, 235, 0.5); } * { scrollbar-width: thin; scrollbar-color: var(--wm-scrollbar-thumb) var(--wm-scrollbar-track); } *::-webkit-scrollbar { width: var(--wm-scrollbar-size); height: var(--wm-scrollbar-size); } *::-webkit-scrollbar-track { background: var(--wm-scrollbar-track); } *::-webkit-scrollbar-thumb { background-color: var(--wm-scrollbar-thumb); border-radius: var(--wm-radius-pill); border: 2px solid transparent; background-clip: padding-box; transition: background-color var(--wm-duration-fast) var(--wm-ease-out); } *::-webkit-scrollbar-thumb:hover { background-color: var(--wm-scrollbar-thumb-hover); } *::-webkit-scrollbar-thumb:active { background-color: var(--wm-scrollbar-thumb-active); } *::-webkit-scrollbar-corner { background: transparent; }