/* ===================================================================== Me & You — Tech Solutions · Design Tokens (Invertista build) Colors + Typography + Spacing + Radii + Shadows + Motion --------------------------------------------------------------------- Hand-rolled, system-font, mobile-first. Tokens are CSS custom properties so the same names work in any project, any stack. Load this file first; everything else references these vars. Invertista is a product surface under the Me & You family: it shares the core (logo language, type, spacing, motion, voice) and varies only through ONE accent — a cool teal (--accent-invertista) — set via . NOTE: dark mode (prefers-color-scheme) from the canonical bundle is intentionally DEFERRED in this build so the whole site — including the still-Bootstrap inner pages — stays light and consistent. Re-add the @media (prefers-color-scheme: dark) block once every view is native. ===================================================================== */ :root { /* ---- Brand — indigo-navy primary, cyan accent (shared family core). Values sampled pixel-exact from the real Me & You app icon. ---- */ --brand-deep: #21357a; /* deepest indigo — the ampersand hook, headings on light */ --brand: #3b4184; /* the navy app-icon square — primary brand fill */ --brand-blue: #5687da; /* mid-blue M facet — links, secondary fills */ --brand-soft: #6c98df; /* lighter periwinkle — hovers, illustrations */ --brand-tint: #e9ecf9; /* very light indigo wash for surfaces */ --accent: #46b6e0; /* cyan — the right M facet, highlights */ --accent-bright: #62bae0;/* brighter cyan tip */ --accent-deep: #2b8fc4; /* deeper cyan for text-on-light contrast */ /* The signature two-tone wordmark + hero atmosphere. */ --brand-gradient: linear-gradient(110deg, var(--brand-deep) 0%, var(--brand-blue) 45%, var(--accent-bright) 100%); --brand-atmosphere: #232a63; /* ---- Neutrals — slate scale ---- */ --ink: #0f172a; /* slate-900 — headings */ --ink-soft: #334155; /* slate-700 — body */ --ink-mute: #64748b; /* slate-500 — captions, exclusions */ --rule: #e2e8f0; /* slate-200 — borders */ --bg: #ffffff; --bg-soft: #f8fafc; /* slate-50 — alternating sections */ --bg-tint: #f1f5f9; /* slate-100 — cards, tints */ /* ---- Warn — the ONLY yellow in the system (LGPD callouts, deprecation) ---- */ --warn-bg: #fef3c7; --warn-border: #f59e0b; --warn-ink: #78350f; /* ================================================================= PRODUCT THEMES — the "close, but varies a bit" mechanism. ================================================================= */ --accent-site: var(--brand); /* Marketing site — core indigo */ --accent-agent: var(--brand-blue); /* DBMonitor Agent — mid-blue */ --accent-game: var(--accent); /* Batalha Naval — cyan */ --accent-odoo: #7c3aed; /* Odoo ERP — violet */ --accent-new: var(--brand); /* default for a brand-new product */ /* Invertista — the inverted real-estate marketplace. A cool teal: "liquidez / capital em movimento", unmistakably the marketplace rather than the studio. Stays cool & on-family. */ --accent-invertista: #0ea5a4; --accent-invertista-deep: #0b7c7b; /* hover / text-on-light contrast */ --accent-invertista-soft: #e3f6f5; /* tint wash for chips / tiles */ /* ================================================================= Typography — pure system stack, no web fonts, no FOIT. ================================================================= */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace; /* Type scale */ --text-xs: 0.8125rem; /* 13 — eyebrows, captions, badges */ --text-sm: 0.9375rem; /* 15 — UI, secondary body */ --text-base: 1rem; /* 16 — body */ --text-lg: 1.125rem; /* 18 — lead paragraphs */ --text-xl: 1.375rem; /* 22 — h3 / card titles */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: 2.25rem; /* 36 — section titles (h2) */ --text-4xl: 3rem; /* 48 */ --text-hero: clamp(2.25rem, calc(5vw + 1rem), 4rem); /* Weights */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Line heights */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.6; /* ================================================================= Spacing — 4-based scale (rem so it reflows with base font) ================================================================= */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; /* Containers */ --container: 72rem; /* 1152px — marketing pages */ --container-sm: 44rem; /* 704px — prose pages */ --container-pad: clamp(1rem, 4vw, 2rem); /* Radii */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; /* Shadows — soft, slate-tinted */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); /* Motion — one ease, used everywhere */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-color: 200ms; --dur-transform: 120ms; } /* ===================================================================== PRODUCT THEMING — wrap any product surface and it auto-themes. … ===================================================================== */ .product { --theme-accent: var(--brand); } .product[data-product="site"] { --theme-accent: var(--accent-site); } .product[data-product="agent"] { --theme-accent: var(--accent-agent); } .product[data-product="game"] { --theme-accent: var(--accent-game); } .product[data-product="odoo"] { --theme-accent: var(--accent-odoo); } .product[data-product="invertista"] { --theme-accent: var(--accent-invertista); } /* Primitives that follow the product accent. */ .product .section-eyebrow { color: var(--theme-accent); } .product :focus-visible { outline-color: var(--theme-accent); } /* ===================================================================== Semantic base — applied directly to elements. ===================================================================== */ body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--lh-body); color: var(--ink-soft); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { color: var(--ink); line-height: var(--lh-tight); letter-spacing: -0.015em; font-weight: var(--fw-bold); text-wrap: balance; /* no orphaned words — critical */ } h1 { letter-spacing: -0.025em; font-weight: var(--fw-extrabold); } p { text-wrap: pretty; } .lead { font-size: var(--text-lg); color: var(--ink-soft); } small, .caption { color: var(--ink-mute); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; } /* Any column of numbers (budgets, metrics) */ .tabular { font-variant-numeric: tabular-nums; } /* Accessibility baseline */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }