/* ============================================================ DATALYZER · DESIGN TOKENS Per-vertical accents · density · color modes ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Geist:wght@400;500;600;700&display=swap'); :root { /* ── Typography ──────────────────────────────── */ --font-sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 22px; --text-xl: 28px; --text-2xl: 40px; --text-3xl: clamp(2.4rem, 5vw + 0.5rem, 4.4rem); /* ── Spacing scale ───────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; --space-11: 96px; --space-12: 128px; --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; /* ── Light mode surfaces ─────────────────────── */ --bg: #f7f7f5; --bg-soft: #efefec; --surface: #ffffff; --surface-2: #fafaf8; --surface-3: #f1f1ed; --border: #e8e8e2; --border-strong: #d2d2cb; --grid: rgba(10, 10, 10, 0.05); --ink: #0a0a0a; --ink-2: #2c2c2c; --ink-3: #686868; --ink-4: #9a9a96; /* ── Brand accent (Datalyzer magenta) ────────── */ --brand: oklch(0.62 0.22 0); --brand-soft: oklch(0.96 0.04 0); --brand-ring: oklch(0.62 0.22 0 / 0.18); /* ── Active accent — set per-page/per-vertical ─ */ --accent: var(--brand); --accent-soft: var(--brand-soft); --accent-ring: var(--brand-ring); --accent-ink: #ffffff; /* ── Status ──────────────────────────────────── */ --good: oklch(0.62 0.16 150); --good-soft: oklch(0.96 0.04 150); --warn: oklch(0.7 0.16 70); --warn-soft: oklch(0.97 0.04 70); --bad: oklch(0.55 0.2 25); --bad-soft: oklch(0.96 0.04 25); /* ── Shadows ─────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(15, 15, 15, 0.04); --shadow-sm: 0 2px 8px rgba(15, 15, 15, 0.05); --shadow-md: 0 8px 24px rgba(15, 15, 15, 0.07); --shadow-lg: 0 24px 56px rgba(15, 15, 15, 0.1); --shadow-accent: 0 8px 24px var(--accent-ring); /* ── Motion ──────────────────────────────────── */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 0.15s; --t-base: 0.25s; --t-slow: 0.5s; /* ── Density (cozy default; comfy / compact via Tweaks) ── */ --density: 1; --container: 1240px; } /* ── Density variants ──────────────────────────── */ :root[data-density="compact"] { --density: 0.85; --space-9: 44px; --space-10: 56px; --space-11: 72px; --text-3xl: clamp(2rem, 4vw + 0.5rem, 3.4rem); } :root[data-density="roomy"] { --density: 1.15; --space-9: 64px; --space-10: 88px; --space-11: 112px; } /* ── Dark mode ─────────────────────────────────── */ :root[data-theme="dark"] { --bg: #0a0a0b; --bg-soft: #131316; --surface: #141417; --surface-2: #1a1a1f; --surface-3: #21212a; --border: #25252c; --border-strong: #37373f; --grid: rgba(255, 255, 255, 0.05); --ink: #f5f5f3; --ink-2: #c8c8c4; --ink-3: #87878a; --ink-4: #5b5b60; --brand-soft: oklch(0.32 0.12 0); --brand-ring: oklch(0.62 0.22 0 / 0.28); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.6); } /* ────────────────────────────────────────────────── PER-VERTICAL ACCENT OVERRIDES Apply on Sober palette: same chroma, varied hue. ────────────────────────────────────────────────── */ [data-vertical="alimentos"] { --accent: oklch(0.58 0.14 150); /* emerald */ --accent-soft: oklch(0.96 0.04 150); --accent-ring: oklch(0.58 0.14 150 / 0.18); } [data-vertical="quimicos"] { --accent: oklch(0.62 0.14 60); /* amber/copper */ --accent-soft: oklch(0.96 0.04 60); --accent-ring: oklch(0.62 0.14 60 / 0.18); } [data-vertical="farmaceutica"] { --accent: oklch(0.55 0.14 230); /* clinical blue */ --accent-soft: oklch(0.96 0.04 230); --accent-ring: oklch(0.55 0.14 230 / 0.18); } [data-vertical="aseo"] { --accent: oklch(0.62 0.14 350); /* rose */ --accent-soft: oklch(0.96 0.04 350); --accent-ring: oklch(0.62 0.14 350 / 0.18); } [data-vertical="manufactura"] { --accent: oklch(0.58 0.14 35); /* burnt orange */ --accent-soft: oklch(0.96 0.04 35); --accent-ring: oklch(0.58 0.14 35 / 0.18); } [data-vertical="empaque"] { --accent: oklch(0.55 0.14 285); /* violet */ --accent-soft: oklch(0.96 0.04 285); --accent-ring: oklch(0.55 0.14 285 / 0.18); } /* Dark-mode adjust accent soft */ [data-theme="dark"][data-vertical="alimentos"] { --accent-soft: oklch(0.28 0.08 150); } [data-theme="dark"][data-vertical="quimicos"] { --accent-soft: oklch(0.28 0.08 60); } [data-theme="dark"][data-vertical="farmaceutica"] { --accent-soft: oklch(0.28 0.08 230); } [data-theme="dark"][data-vertical="aseo"] { --accent-soft: oklch(0.28 0.08 350); } [data-theme="dark"][data-vertical="manufactura"] { --accent-soft: oklch(0.28 0.08 35); } [data-theme="dark"][data-vertical="empaque"] { --accent-soft: oklch(0.28 0.08 285); }