/* ===================================================================== Design System — TOKENS (the portable core) v0.3.0 The raw values every project shares. CSS vars for web; the SAME values map to Odoo SCSS, Android themes, and Figma. Components (base.css) and apps consume ONLY these tokens — never raw hex/px. Themes override the --c-* color tokens; scale tokens are theme-agnostic. Signature fonts are custom-first with a robust system fallback, so they "just work" without the fonts and upgrade automatically when a project loads them (see styleguide for the Google Fonts ). Cascade: everything ships inside named @layers so a consuming app's own styles win over the system without specificity/!important wars. Layer order (lowest → highest priority) is declared once, here, first. ===================================================================== */ @layer ds.tokens, ds.base, ds.components, ds.presets, ds.utilities, ds.signature; @layer ds.tokens{ :root{ /* ---- type ---- */ --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Space Grotesk", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --fs-11:11px; --fs-12:12.5px; --fs-13:13.5px; --fs-14:14px; --fs-15:15px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px; --fs-30:30px; --fs-36:36px; --fs-44:44px; --fw-normal:400; --fw-medium:500; --fw-semi:600; --fw-bold:700; --lh-tight:1.25; --lh:1.55; --lh-prose:1.7; /* 1.25 is the descender-ink-safe display floor; go tighter only with .ds-ink-safe */ --tracking-display:-.02em; /* the signature tight display tracking */ /* ---- icons (Lucide standard — the system uses NO emoji; see CLAUDE.md) ---- Lucide is ISC-licensed, ~1,600 glyphs on a 24-grid / 2px stroke. Icons render via currentColor (so they theme through --c-* for free); weight and box size are tokens, never hard-coded. */ --icon:1em; /* icon box scales with the text it sits beside */ --icon-stroke:2; /* Lucide-native 2px stroke, tokenized so weight stays themeable */ /* ---- spacing scale (4-based) ---- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; /* ---- radius (deliberately off-grid: 7/11/15, tuned by eye) ---- */ --r-sm:7px; --r:11px; --r-lg:15px; --r-pill:999px; /* ---- motion ---- Durations are a scale; easings are a FAMILY that differs by CURVE, not just time — that's where the motion personality lives. --t / --t-slow are kept as back-compat aliases (duration + easing). */ --d-1:.1s; --d-2:.18s; --d-3:.26s; --d-4:.4s; --d-5:.6s; --e-standard:cubic-bezier(.4,0,.2,1); /* neutral in-out (the original curve) */ --e-entrance:cubic-bezier(.16,1,.3,1); /* expo-out — decelerate on enter */ --e-exit:cubic-bezier(.4,0,1,1); /* accelerate on exit */ --e-spring:cubic-bezier(.34,1.56,.64,1); /* overshoot — the signature wipe */ --t:var(--d-2) var(--e-standard); --t-slow:var(--d-3) var(--e-standard); --lift-1:translateY(-1px); /* tokenized hover lift */ --lift-2:translateY(-2px); --press-scale:.97; /* ---- elevation ---- */ --sh-1:0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.22); --sh-2:0 4px 14px rgba(0,0,0,.38); --sh-pop:0 14px 44px rgba(0,0,0,.55); /* ---- signature motif (the recurring accent rail / gradient) ---- ONE named gradient, reused for nav rails, meters, progress, gradient text and empty-state hairlines. It resolves through --c-accent / --c-accent-2, so a client theme that sets accent-2 = accent collapses it to a flat neutral bar automatically: pop AND client-safe. */ --grad-angle:115deg; --grad-signature:linear-gradient(var(--grad-angle),var(--c-accent),var(--c-accent-2)); --grad-signature-v:linear-gradient(180deg,var(--c-accent),var(--c-accent-2)); /* vertical, for thin rails */ /* ---- container ---- */ --content-max:880px; } /* ===================================================================== THEME: dark-internal (default — dashboards, internal tools) Verified WCAG AA: txt 16.9:1, accent 7.5:1, on-accent 7.25:1. ===================================================================== */ :root, .theme-dark{ --c-bg:#0a0d12; --c-surface:#13181f; --c-surface-2:#1a212b; --c-surface-hover:#1f2732; --c-line:#272e38; --c-line-2:#343c47; --c-txt:#eaf0f7; --c-txt-2:#aab4c0; --c-muted:#79838f; --c-accent:#5aa2ff; --c-accent-2:#8a7bff; --c-on-accent:#08111e; /* text on a filled accent surface */ --c-focus:#7bb4ff; /* focus-visible ring */ --c-info:#56b6e6; --c-good:#46c463; --c-warn:#e0a83a; --c-danger:#ec6a62; --c-danger-strong:#d94238; /* solid danger fills */ /* source / channel hues */ --c-x:#3aa0f0; --c-gh:#b083f7; --c-feed:#46c463; --c-bg-grad: radial-gradient(1100px 520px at 78% -8%, #141b26 0%, transparent 60%); } /* ===================================================================== THEME: light (docs, light web UIs) — small-text contrast fixed to AA. ===================================================================== */ .theme-light{ --c-bg:#f6f8fb; --c-surface:#ffffff; --c-surface-2:#f0f3f7; --c-surface-hover:#eef2f7; --c-line:#e2e7ee; --c-line-2:#d3dae3; --c-txt:#10151c; --c-txt-2:#46505b; --c-muted:#5f6873; /* was #7a838d (3.85:1) -> AA */ --c-accent:#1f5fef; /* was #2b6fff (4.36:1) -> AA */ --c-accent-2:#6a52ff; --c-on-accent:#ffffff; --c-focus:#1f5fef; --c-info:#0e74a8; --c-good:#147f3c; /* was #1f9d4d (3.51:1) -> AA */ --c-warn:#8f6310; /* was #b67d12 (3.54:1) -> AA */ --c-danger:#d23b32; --c-danger-strong:#c0291f; --c-x:#1d9bf0; --c-gh:#8250df; --c-feed:#147f3c; --c-bg-grad:none; --sh-1:0 1px 2px rgba(16,21,28,.06), 0 6px 18px rgba(16,21,28,.06); --sh-2:0 4px 14px rgba(16,21,28,.1); --sh-pop:0 14px 40px rgba(16,21,28,.16); } /* ===================================================================== Make your own theme by overriding the --c-* color tokens only. Everything else (spacing, type, radius, motion) stays shared. Example accent variant: ===================================================================== */ .theme-emerald{ --c-accent:#2bd4a6; --c-accent-2:#3aa0f0; --c-focus:#5fe3c0; } }