/* Pouls MedTech Insights — design-system.css * * Token layer for the entire site. Loaded by both the marketing surface * (eqms_starter/app/eqms/templates/marketing/_base.html) and the legacy * admin/auth surface (eqms_starter/app/eqms/templates/_layout.html). * * This file is intentionally tokens-only — no body styling, no * components. Marketing components live in marketing/marketing.css. * Legacy admin components live in admin-shell.css. * * Naming. Marketing-side tokens are unprefixed (`--color-ink`, * `--space-4`, etc.) and consumed directly by marketing.css. Legacy * admin tokens are kept under the `--legacy-*` namespace; admin-shell.css * pulls those when styling the dark scaffold. * * Class-name prefix `ri-` is legacy nomenclature inherited from the * pre-rebrand brand and is kept as a content-free namespace prefix * for code stability. A future PR may rename it to `pmi-` (Pouls * MedTech Insights). Do not introduce a new prefix in the meantime; * stay consistent with the existing `ri-*` selectors so renaming * remains a single mechanical sweep. */ :root { /* -------------------------------------------------------------- * Color — neutrals * -------------------------------------------------------------- */ --color-neutral-50: #f9fafb; --color-neutral-100: #f3f4f6; --color-neutral-200: #e5e7eb; --color-neutral-300: #d1d5db; --color-neutral-400: #9ca3af; --color-neutral-500: #6b7280; --color-neutral-600: #4b5563; --color-neutral-700: #374151; --color-neutral-800: #1f2937; --color-neutral-900: #111827; /* Cool slate alternates for editorial pages */ --color-ink: #0b1220; /* near-black for h1/h2 */ --color-ink-700: #1e293b; /* body text */ --color-ink-600: #334155; --color-ink-500: #475569; /* secondary copy */ --color-ink-400: #64748b; /* tertiary, captions */ --color-line: #e2e8f0; --color-line-soft: #eef2f7; --color-surface: #ffffff; --color-surface-soft: #f8fafc; --color-surface-tint: #f1f5f9; /* -------------------------------------------------------------- * Color — brand * -------------------------------------------------------------- */ --color-primary: #1f3b6b; /* deep editorial ink-blue */ --color-primary-dark: #14274a; --color-primary-deep: #0e1d3a; --color-primary-soft: #e7ecf5; --color-primary-tint: #f3f6fc; --color-accent: #c75a3c; /* terracotta — used sparingly */ --color-accent-soft: #f9e3da; /* -------------------------------------------------------------- * Color — semantic * -------------------------------------------------------------- */ --color-success: #166534; --color-success-soft: #dcfce7; --color-warn: #92400e; --color-warn-soft: #fef3c7; --color-warn-line: #fcd34d; --color-danger: #991b1b; --color-danger-soft: #fee2e2; --color-danger-line: #fecaca; --color-info: #1e3a8a; --color-info-soft: #dbeafe; /* -------------------------------------------------------------- * Type * -------------------------------------------------------------- */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: "Source Serif 4", "Source Serif Pro", "Charter", "Georgia", "Times New Roman", serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Type scale — fluid via clamp() at the consumer site */ --fs-caption: 0.78rem; /* 12.5px */ --fs-small: 0.875rem; /* 14px */ --fs-body: 1rem; /* 16px */ --fs-body-lg: 1.0625rem; /* 17px */ --fs-h6: 1rem; --fs-h5: 1.125rem; --fs-h4: 1.25rem; --fs-h3: 1.5rem; --fs-h2: 2.0rem; --fs-h1: 2.75rem; --fs-display: 3.5rem; --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.55; --lh-prose: 1.7; /* -------------------------------------------------------------- * Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128) * -------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* -------------------------------------------------------------- * Layout * -------------------------------------------------------------- */ --container-max: 1200px; --container-mid: 980px; --container-text: 720px; --container-narrow: 580px; --pad-x: clamp(20px, 4vw, 32px); /* -------------------------------------------------------------- * Radius * -------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 18px; --radius-pill: 9999px; /* -------------------------------------------------------------- * Shadow (used sparingly) * -------------------------------------------------------------- */ --shadow-xs: 0 1px 1px rgba(11, 18, 32, 0.04); --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06), 0 1px 3px rgba(11, 18, 32, 0.04); --shadow-md: 0 4px 6px -1px rgba(11, 18, 32, 0.08), 0 2px 4px -2px rgba(11, 18, 32, 0.06); --shadow-lg: 0 10px 25px -5px rgba(11, 18, 32, 0.10), 0 8px 10px -6px rgba(11, 18, 32, 0.06); /* -------------------------------------------------------------- * Motion * -------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 320ms; /* -------------------------------------------------------------- * Breakpoints (consumed by media queries via comments — these are * here as documentation since plain CSS can't read vars in @media) * --bp-sm: 480px * --bp-md: 720px * --bp-lg: 960px * --bp-xl: 1200px * -------------------------------------------------------------- */ /* -------------------------------------------------------------- * Legacy admin/auth tokens (consumed by admin-shell.css). The * legacy surface is the dark internal scaffold (login, admin * leads, audit). Out of scope for v2 redesign. * -------------------------------------------------------------- */ --legacy-bg: #0b1220; --legacy-panel: #0f1a30; --legacy-text: #e6eefc; --legacy-muted: #a8b6d6; --legacy-border: #223152; --legacy-primary: #66a3ff; --legacy-danger: #ff6b6b; --legacy-success: #3ddc97; --legacy-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }