/* ================================================================== POSTO — canonical design tokens Single source of truth for the whole system. The shell links this ahead of portal.css; mountModule injects it into each module's AFTER the module's own stylesheet, so these values win the cascade and reach all four tools without any module source edit. Changing a colour here changes it everywhere — the palette below was reverted in this one file and landed on every page and every module at once. That is the whole point of this layer. ================================================================== */ :root { /* --- Surfaces: the original navy, unchanged ------------------- */ --bg: #0b1220; --bg-2: #0f1830; --surface: #131d38; --surface-2: #17244a; /* New step. The old palette had no third surface, so components invented their own one-off values for raised insets. */ --surface-3: #1e2d5c; --border: #24345f; --border-soft: #1c2a4d; --text: #e8eefc; --text-dim: #a7b4d6; --text-faint: #6f7ea8; /* --- Accent --------------------------------------------------- */ --brand: #4f8cff; --brand-2: #6ea1ff; --brand-ink: #06122e; /* Named tints so no component re-derives these by hand. */ --brand-dim: rgba(79, 140, 255, 0.14); --brand-line: rgba(110, 161, 255, 0.35); --brand-grad: linear-gradient(180deg, var(--brand-2), var(--brand)); /* --- Status --------------------------------------------------- */ --green: #2fbf71; --green-soft: rgba(47, 191, 113, 0.14); --green-line: rgba(47, 191, 113, 0.4); --yellow: #f2b134; --yellow-soft: rgba(242, 177, 52, 0.14); --yellow-line: rgba(242, 177, 52, 0.4); --red: #ef5a5a; --red-soft: rgba(239, 90, 90, 0.14); --red-line: rgba(239, 90, 90, 0.4); /* --- Derived surface treatments ------------------------------- Previously these were hand-written rgba() literals scattered through the components. Named here so nothing drifts. */ --bar-bg: rgba(11, 18, 32, 0.86); --rail-bg: rgba(15, 24, 48, 0.6); --scrim: rgba(4, 8, 18, 0.55); --hover-line: #33477d; --row-hover: rgba(23, 36, 74, 0.5); /* --- Radius: a scale, tighter inside than outside ------------- */ --radius-xs: 6px; --radius-sm: 9px; --radius: 14px; --radius-lg: 18px; /* --- Shadows: tinted navy, not pure black --------------------- */ --shadow-sm: 0 1px 2px rgba(4, 8, 18, 0.55); --shadow: 0 18px 45px -22px rgba(4, 8, 18, 0.8); --shadow-lg: 0 28px 60px -28px rgba(4, 8, 18, 0.9); --shadow-accent: 0 12px 26px -14px rgba(79, 140, 255, 0.8); /* --- Type ------------------------------------------------------ */ --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; --step--1: 0.8125rem; --step-0: 0.9375rem; --step-1: 1.0625rem; --step-2: 1.25rem; --step-3: 1.625rem; --step-4: 2.125rem; --track-display: -0.02em; --track-title: -0.012em; --track-label: 0.07em; /* --- Motion ---------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); --dur-fast: 140ms; --dur: 220ms; /* --- Spacing: 4/8 rhythm --------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px; /* --- Layering: a scale, not arbitrary numbers ------------------ */ --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-scrim: 30; --z-drawer: 40; --z-toast: 60; /* --- Page rhythm ----------------------------------------------- */ --measure: 68ch; --page-max: 1180px; } /* The original page background: two navy radials over the base. */ .page-bg { background: radial-gradient(1100px 620px at 82% -8%, #16234a 0%, transparent 58%), radial-gradient(900px 520px at 6% 2%, #122043 0%, transparent 55%), var(--bg); background-attachment: fixed; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; } }