/* ============================================================================= Base — product design-system tokens (spacing/radius/shadow/type scale) and global element styling. Brand colour tokens live in tokens.css; everything non-colour that the product needs is defined here. ========================================================================== */ :root { /* Spacing scale — 4px base */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-10: 4rem; --space-12: 6rem; /* Radius — the product is square. The mockup and the website use no border-radius; brand-kit defines none for UI surfaces. Tokens kept at 0 so existing var() references resolve to square. */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-pill: 0; /* Shadows — brand-kit §4.4: NO drop shadows. The only legitimate box-shadow is colored "light" — a 0-offset glow halo, used on hover / the CTA. Resting surfaces are flat, differentiated by --card-bg, not elevation. */ --shadow-card: none; --shadow-pop: none; --glow-hover: 0 0 30px var(--accent-glow); --glow-cta: 0 0 20px var(--cta-glow); /* Type scale */ --text-h1: 2.25rem; --text-h2: 1.5rem; --text-h3: 1.25rem; --text-h4: 1rem; --text-body: 1rem; --text-body-sm: 0.875rem; --text-body-xs: 0.8125rem; --text-caption: 0.75rem; /* Layout metrics */ --topbar-h: 60px; --sidebar-w: 248px; --content-max: 1320px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur: 200ms; /* Z-index ladder */ --z-topbar: 100; --z-drawer: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; } body { font-family: var(--font-body); font-size: var(--text-body-sm); line-height: 1.5; color: var(--text-primary); background: var(--canvas); transition: color var(--dur) var(--ease); scrollbar-gutter: stable; } /* Scroll-lock while a Modal/Drawer is open — the overlay sets this on . */ body.is-scroll-locked { overflow: hidden; } /* Fixed atmospheric glow — top-right, behind all content. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient( 120% 70% at 100% 0%, color-mix(in srgb, var(--brand-primary-800) 55%, transparent), transparent 62% ); } /* Headings — Manrope display */ h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; } h1 { font-size: var(--text-h1); font-weight: 700; line-height: 1.1; } h2 { font-size: var(--text-h2); font-weight: 700; line-height: 1.2; } h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.3; } h4 { font-size: var(--text-h4); font-weight: 600; font-family: var(--font-body); } p { line-height: 1.6; } code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; } ::selection { background: var(--accent-glow); } /* App scaffold ------------------------------------------------------------- */ #app { min-height: 100%; display: flex; flex-direction: column; } #app > * { flex: 1; display: flex; flex-direction: column; } /* Scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: content-box; }