/* assets/css/tokens.css */ /* ════════════════════════════════════════════════════════════════════ VARIABLES.CSS — Vimta Design System · Single Source of Truth ════════════════════════════════════════════════════════════════════ Architecture ──────────── · OKLCH throughout — perceptual uniformity, no mid-scale grey mud · color-mix() for on-demand transparency (no pre-built alpha libs) · clamp() for all fluid values — 375px → 1440px in one token · T-shirt sizing: 3xs · 2xs · xs · s · m · l · xl · 2xl · 3xl · CSS @layer for deterministic cascade control · 8pt spatial grid — every fixed size is a multiple of 0.25rem · em-based padding for buttons & inputs (scales with font-size) · rem-based layout spacing (respects user font preferences) Color Philosophy ──────────────── · Primary #00827f → oklch(54.8% 0.094 191.9) Deep Teal-Cyan · Secondary #ffe1d8 → oklch(92.5% 0.04 30) Warm Blush (brand-locked) · Accent oklch(62% 0.14 65) Warm Gold — data / KPI Typography ────────── · Heading GeoGrotesque (TypeTogether) — geometric, precise, clinical authority · Body Plus Jakarta Sans (Google) — geometric-humanist, warm at small sizes, tabular figures for data tables · Mono JetBrains Mono — code blocks, lab values if needed The primary (cool teal 191.9°) and secondary (warm blush 30°) sit 162° apart — neither true complementary nor analogous. Raw placement creates visual argument. Harmony is achieved by: 1. Neutrals → hue 210 (clinical blue-grey). No longer secondary- adjacent. At this chroma the tint is imperceptible in isolation but prevents large-white-area pages feeling warm/spa. Gives neutrals their own identity and pairs naturally with teal. 2. Off-white → microscopic 210° tint. Subtly reinforces the clinical register of the product. 3. Warm Gold accent (hue 65) bridges the two poles with intent. Harmonises with secondary (adjacent hue), is distinct enough to carry meaning, and reads as "achievement / data" not "brand". 4. --surface-tinted — whisper-light primary wash for alternating sections, data table rows, and active nav states. Keeps white- heavy pharma layouts alive without introducing new colours. 5. --feedback-info shifted to hue 210 (primary family). Reads as "the system is telling you something", not a random blue. Accessibility ───────────── · Every text/bg pair verified ≥ 4.5:1 WCAG AA (normal text) · Large text & UI components verified ≥ 3:1 · text-subtle targets 3:1 minimum (placeholders, disabled) · Feedback colours pass on white AND their own tinted light surface · All ratios documented inline at point of declaration ════════════════════════════════════════════════════════════════════ */ @layer tokens, reset, global, layouts, components, utilities; /* ════════════════════════════════════════════════════════════════════ ROOT TOKENS ════════════════════════════════════════════════════════════════════ */ @layer tokens { :root { /* ─────────────────────────────────────────────────────────────────── §1 COLOR PALETTE ─────────────────────────────────────────────────────────────────── Raw hue ramps. Components bind to §2 semantic tokens only. Exception: one-off utility classes may reach palette tokens directly. Scale: ultra-dark · dark · semi-dark · [base] · semi-light · light · ultra-light ─────────────────────────────────────────────────────────────────── */ /* ── Primary · #00827f · Deep Teal-Cyan · hue 191.9 ── */ --primary: oklch(54.8% 0.094 191.9); /* exact hex → OKLCH */ --primary-ultra-dark: oklch(22% 0.075 191.9); --primary-dark: oklch(35% 0.095 191.9); --primary-semi-dark: oklch(44% 0.100 191.9); --primary-semi-light: oklch(62% 0.088 191.9); --primary-light: oklch(72% 0.068 191.9); --primary-ultra-light: oklch(95% 0.022 191.9); --primary-hover: oklch(47% 0.105 191.9); /* richer on hover */ --primary-active: oklch(38% 0.105 191.9); /* pressed */ /* ── Secondary · #ffe1d8 · Warm Blush · hue 30 (brand-locked) ── */ --secondary: oklch(92.5% 0.040 30); --secondary-ultra-dark: oklch(52% 0.065 30); --secondary-dark: oklch(68% 0.060 30); --secondary-semi-dark: oklch(80% 0.052 30); --secondary-semi-light: oklch(95% 0.028 30); --secondary-light: oklch(97% 0.018 30); --secondary-ultra-light: oklch(98.5% 0.010 30); --secondary-hover: oklch(88% 0.052 30); --secondary-active: oklch(80% 0.060 30); /* ── Accent · Warm Gold · hue 65 ────────────────────────────── Purposeful bridge between teal and blush. Use for: KPI values, data badges, progress milestones, highlights. --accent → 3.77:1 white → UI/large-text/decorative only --accent-dark → 5.69:1 white ✅ AA → use for text ── */ --accent: oklch(62% 0.140 65); --accent-dark: oklch(50% 0.140 65); /* text-safe on white ✅ */ --accent-light: oklch(93% 0.040 65); --accent-ultra-light: oklch(97% 0.018 65); /* ── Neutrals · hue 210 · Clinical Blue-Grey ─────────────────── Shifted from hue 30 (secondary-adjacent) to hue 210. At c ≤ 0.007 the tint is sub-perceptual but consistent; it keeps the neutral scale in the cool/clinical family alongside the teal primary rather than bleeding into the warm blush. ── */ --white: oklch(100% 0 0); --off-white: oklch(97.5% 0.002 210); /* imperceptible clinical cool */ --neutral-ultra-light: oklch(95% 0.004 210); --neutral-light: oklch(90% 0.005 210); --neutral-semi-light: oklch(82% 0.006 210); --neutral-semi-dark: oklch(50% 0.007 210); /* 6.02:1 white ✅ · 5.20:1 sunken ✅ */ --neutral-dark: oklch(35% 0.007 210); /* 11.34:1 white ✅ AAA */ --neutral-ultra-dark: oklch(20% 0.007 210); --black: oklch(12% 0.007 210); /* 20.31:1 white ✅ AAA */ /* ─────────────────────────────────────────────────────────────────── §2 SEMANTIC TOKENS — THE DESIGN CONTRACT ─────────────────────────────────────────────────────────────────── Every component, layout, and utility binds here. §1 palette = paint. §2 semantics = instructions. Contrast on white (#ffffff): --text-main 20.31:1 ✅ AAA --text-body 11.34:1 ✅ AAA --text-muted 6.02:1 ✅ AA --text-subtle 3.73:1 ✅ AA-Large / 3:1 UI --text-link 4.67:1 ✅ AA --text-link-hover 5.92:1 ✅ AA ─────────────────────────────────────────────────────────────────── */ /* ── Text ── */ --text-main: var(--black); --text-body: var(--neutral-dark); --text-muted: var(--neutral-semi-dark); --text-subtle: oklch(60% 0.005 210); /* placeholders, disabled · 3:1 UI ✅ */ --text-on-primary: var(--white); --text-on-secondary: var(--black); --text-on-accent: var(--white); --text-on-dark: var(--white); --text-on-light: var(--black); --text-link: var(--primary); /* 4.67:1 ✅ */ --text-link-hover: var(--primary-hover); /* 5.92:1 ✅ */ --text-link-visited: var(--primary-semi-dark); /* 5.80:1 ✅ */ --text-accent: var(--primary); /* headings, labels needing brand emphasis */ /* ── Component accent tokens ── */ --icon-color: var(--primary); /* default icon fill in cards, sidebars */ --icon-color-muted: var(--text-muted); --card-accent: var(--primary); /* accent strips, highlighted borders */ --card-accent-strip: 3px solid var(--primary); /* top/left accent border on cards */ /* ── Surfaces ── */ --body-bg: var(--white); --surface-raised: var(--off-white); /* cards, sidebars */ --surface-sunken: var(--neutral-ultra-light); /* inputs, code blocks */ --surface-tinted: oklch(97% 0.018 191.9); /* alt rows, stat blocks, active nav */ --surface-primary: var(--primary); --surface-secondary: var(--secondary); --surface-accent: var(--accent-light); --surface-dark: var(--black); --surface-highlight: var(--primary-ultra-light); /* ── Borders ── */ --border-subtle: var(--neutral-ultra-light); /* ghost dividers */ --border-muted: oklch(92% 0.005 210); /* card/panel borders — between subtle and default */ --border-default: var(--neutral-light); /* inputs, cards */ --border-strong: var(--neutral-semi-light); /* emphasis, active */ --border-focus: var(--primary); --border-accent: var(--accent); --border-secondary: oklch(85% 0.028 30); /* warm blush border — footer, investor pages */ /* ── Glass overlays (semi-transparent white for glassmorphism on dark bg) ── */ --overlay-glass-subtle: oklch(100% 0 0 / 10%); --overlay-glass-medium: oklch(100% 0 0 / 15%); --overlay-glass-strong: oklch(100% 0 0 / 25%); --text-on-dark: oklch(100% 0 0); --text-on-dark-muted: oklch(100% 0 0 / 85%); --text-on-dark-subtle: oklch(100% 0 0 / 55%); /* ── Feedback ─────────────────────────────────────────────────────── All values pass 4.5:1 on white AND on their light surface. --feedback-info at hue 210 (primary-adjacent) reads as "system". ── */ --feedback-success: oklch(44% 0.155 150); /* 5.87:1 white ✅ · 5.51:1 light ✅ */ --feedback-success-light: oklch(94% 0.032 150); --feedback-success-dark: oklch(28% 0.120 150); --feedback-warning: oklch(46% 0.135 72); /* 6.18:1 white ✅ · 5.54:1 light ✅ */ --feedback-warning-light: oklch(95% 0.032 72); --feedback-warning-dark: oklch(30% 0.100 72); --feedback-error: oklch(46% 0.175 25); /* 6.33:1 white ✅ · 5.78:1 light ✅ */ --feedback-error-light: oklch(94% 0.032 25); --feedback-error-dark: oklch(28% 0.140 25); --feedback-info: oklch(44% 0.095 210); /* 6.91:1 white ✅ · 5.67:1 light ✅ */ --feedback-info-light: oklch(94% 0.022 210); --feedback-info-dark: oklch(28% 0.070 210); /* ─────────────────────────────────────────────────────────────────── §3 OVERLAYS ─────────────────────────────────────────────────────────────────── */ --overlay-heavy: oklch(12% 0.007 210 / 80%); --overlay-dark: oklch(12% 0.007 210 / 65%); --overlay-medium: oklch(12% 0.007 210 / 45%); --overlay-light: oklch(12% 0.007 210 / 20%); --overlay-primary: oklch(54.8% 0.094 191.9 / 72%); --overlay-primary-soft: oklch(54.8% 0.094 191.9 / 20%); --backdrop-blur: blur(12px); --backdrop-blur-heavy: blur(24px); /* ─────────────────────────────────────────────────────────────────── §4 TYPOGRAPHY ─────────────────────────────────────────────────────────────────── Pharma-specific additions beyond the standard body/heading scale: --text-overline → Above-heading category marker ("PHASE II · TRIAL") Smallest, widest tracking. --text-label → ALL-CAPS form labels, table column headers, data-field keys. Use with tracking-caps + uppercase. --text-data → Numeric lab values, percentages, measurements. Pair with font-mono + font-variant-numeric: tabular-nums. --text-data-large → Hero stat numbers on dashboards. --text-data-unit → Unit suffix alongside values (mg/dL, %, n=). ─────────────────────────────────────────────────────────────────── */ --font-heading: 'GeoGrotesque', 'Arial Nova', Arial, sans-serif; --font-body: 'GeoGrotesque', 'Trebuchet MS', Arial, sans-serif; --font-mono: 'Courier New', 'Courier', monospace; /* ── Body scale (fluid 320px → 1440px) ───────────────────────────── Slopes are intentionally small for body text (0.011vw ≈ 2px across the full range). This keeps reading text stable across viewports. ── */ --text-2xs: clamp(0.625rem, 0.598rem + 0.008vw, 0.6875rem); /* ~10→11 */ --text-xs: clamp(0.6875rem, 0.652rem + 0.011vw, 0.8125rem); /* ~11→13 */ --text-s: clamp(0.8125rem, 0.777rem + 0.011vw, 0.9375rem); /* ~13→15 */ --text-m: clamp(1rem, 0.964rem + 0.011vw, 1.125rem); /* ~16→18 */ --text-l: clamp(1.125rem, 1.071rem + 0.017vw, 1.3125rem); /* ~18→21 */ --text-xl: clamp(1.25rem, 1.179rem + 0.022vw, 1.5rem); /* ~20→24 */ /* ── Heading scale (fluid 320px → 1440px) ───────────────────────── Larger slopes for headings — visible scaling from mobile to desktop. ── */ --heading-xs: clamp(1.25rem, 1.143rem + 0.033vw, 1.625rem); /* ~20→26 */ --heading-s: clamp(1.5rem, 1.357rem + 0.045vw, 2rem); /* ~24→32 */ --heading-m: clamp(1.875rem, 1.661rem + 0.067vw, 2.625rem); /* ~30→42 */ --heading-l: clamp(2.25rem, 1.929rem + 0.100vw, 3.375rem); /* ~36→54 */ --heading-xl: clamp(2.75rem, 2.321rem + 0.134vw, 4.25rem); /* ~44→68 */ --heading-2xl: clamp(3.25rem, 2.607rem + 0.201vw, 5.5rem); /* ~52→88 */ /* ── Pharma-specific roles ── */ --text-overline: 0.625rem; /* 10px — widest tracking, all-caps only */ --text-label: var(--text-xs); /* form labels, table headers */ --text-data: var(--text-l); /* numeric lab values */ --text-data-large: var(--heading-m); /* dashboard hero stats */ --text-data-unit: var(--text-s); /* "mg/dL" "n=214" unit suffixes */ /* ── Leading ── */ --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.8; /* dense data tables */ /* ── Weight ── */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 500; /* was 600 — vimta-600.woff2 renders italic glyphs */ --weight-bold: 700; /* ── Tracking ── */ --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-caps: 0.08em; /* ALL-CAPS labels */ --tracking-overline: 0.12em; /* section overlines */ /* ─────────────────────────────────────────────────────────────────── §5 SPACING — 8pt Grid ─────────────────────────────────────────────────────────────────── All fixed values are multiples of 0.25rem (4px base unit). Fluid range: 320px → 1440px. ─────────────────────────────────────────────────────────────────── */ --space-3xs: clamp(0.125rem, 0.10rem + 0.10vw, 0.25rem); /* 2→4px */ --space-2xs: clamp(0.25rem, 0.20rem + 0.20vw, 0.5rem); /* 4→8px */ --space-xs: clamp(0.5rem, 0.40rem + 0.40vw, 0.75rem); /* 8→12px */ --space-s: clamp(0.75rem, 0.60rem + 0.60vw, 1rem); /* 12→16px */ --space-m: clamp(1rem, 0.80rem + 0.85vw, 1.5rem); /* 16→24px */ --space-l: clamp(1.5rem, 1.20rem + 1.25vw, 2.25rem); /* 24→36px */ --space-xl: clamp(2rem, 1.50rem + 2.00vw, 3.25rem); /* 32→52px */ --space-2xl: clamp(3rem, 2.20rem + 3.20vw, 5rem); /* 48→80px */ --space-3xl: clamp(4rem, 3.00rem + 4.20vw, 7rem); /* 64→112px */ /* ─────────────────────────────────────────────────────────────────── §6 SECTION SPACING ─────────────────────────────────────────────────────────────────── */ --section-space-xs: clamp(2rem, 1.5rem + 2.0vw, 3rem); --section-space-s: clamp(2.5rem, 1.8rem + 2.8vw, 4rem); --section-space-m: clamp(3.5rem, 2.5rem + 4.0vw, 5.5rem); --section-space-l: clamp(4.5rem, 3.2rem + 5.2vw, 7.5rem); --section-space-xl: clamp(6rem, 4.2rem + 7.2vw, 10rem); --section-space-2xl: clamp(8rem, 5.5rem + 10.0vw, 14rem); --gutter: clamp(1rem, 0.5rem + 3.0vw, 2.5rem); /* ─────────────────────────────────────────────────────────────────── §7 LAYOUT ─────────────────────────────────────────────────────────────────── */ --content-width: 85.375rem; /* 1366px — primary desktop */ --content-width-narrow: 56.25rem; /* 900px — articles, forms */ --content-width-wide: 100rem; /* 1600px — data dashboards */ --content-width-full: 100%; /* ─────────────────────────────────────────────────────────────────── §8 CONTEXTUAL GAPS ─────────────────────────────────────────────────────────────────── */ --container-gap: var(--space-l); --content-gap: var(--space-m); --grid-gap: var(--space-m); --flow-space: var(--space-m); --stack-gap: var(--space-s); /* tight vertical stacks */ --cluster-gap: var(--space-xs); /* inline tag / badge clusters */ --header-height: 4rem; /* 64px — 8pt ✅ */ --header-padding-block: var(--space-s); --footer-padding-block: var(--section-space-m); --sidebar-width: 18rem; /* 288px */ --sidebar-width-compact: 4.5rem; /* 72px — icon-only */ /* ─────────────────────────────────────────────────────────────────── §9 BUTTONS ─────────────────────────────────────────────────────────────────── Squish-inset pattern: less block, more inline. Heights at 16px base: Default → 40px ✅ 8pt grid Small → 34px Large → 48px ✅ 8pt grid ─────────────────────────────────────────────────────────────────── */ --btn-padding-block: 0.625em; --btn-padding-inline: 1.25em; --btn-font-size: var(--text-m); --btn-font-weight: var(--weight-semibold); --btn-line-height: var(--leading-none); --btn-radius: var(--radius-s); --btn-icon-gap: 0.5em; --btn-transition: var(--duration-normal) var(--ease-default); --btn-min-inline-size: 8rem; --btn-focus-ring: var(--focus-ring); --btn-focus-offset: var(--focus-ring-offset); --btn-s-padding-block: 0.5em; --btn-s-padding-inline: 1em; --btn-s-font-size: var(--text-s); --btn-l-padding-block: 0.75em; --btn-l-padding-inline: 1.5em; --btn-l-font-size: var(--text-l); /* ── Primary · white on teal · 4.67:1 ✅ AA ── */ --btn-primary-bg: var(--primary); --btn-primary-text: var(--text-on-primary); --btn-primary-bg-hover: var(--primary-hover); --btn-primary-bg-active: var(--primary-active); --btn-primary-shadow: var(--shadow-primary); /* ── Secondary · black on blush · 16.03:1 ✅ AAA ── */ --btn-secondary-bg: var(--secondary); --btn-secondary-text: var(--text-on-secondary); --btn-secondary-bg-hover: var(--secondary-hover); --btn-secondary-bg-active:var(--secondary-active); /* ── Outline · teal on white · 4.67:1 ✅ ── */ --btn-outline-border: var(--primary); --btn-outline-text: var(--primary); --btn-outline-bg-hover: var(--primary); --btn-outline-text-hover: var(--text-on-primary); /* ── Ghost ── */ --btn-ghost-text: var(--primary); --btn-ghost-bg-hover: color-mix(in oklch, var(--primary) 8%, transparent); /* ── Danger ── */ --btn-danger-bg: var(--feedback-error); --btn-danger-text: var(--white); --btn-danger-bg-hover: oklch(42% 0.175 25); --btn-danger-bg-active: oklch(36% 0.175 25); /* ── Neutral light (on dark backgrounds) ── */ --btn-neutral-light-bg: var(--white); --btn-neutral-light-text: var(--text-main); --btn-neutral-light-bg-hover: var(--neutral-ultra-light); /* ── Neutral dark (on light backgrounds) ── */ --btn-neutral-dark-bg: var(--black); --btn-neutral-dark-text: var(--text-on-dark); --btn-neutral-dark-bg-hover: var(--neutral-ultra-dark); /* ─────────────────────────────────────────────────────────────────── §10 CARDS ─────────────────────────────────────────────────────────────────── Fixed rem padding — 8pt grid. Inner gap tighter than padding (Gestalt proximity). ─────────────────────────────────────────────────────────────────── */ --card-padding: 1.5rem; --card-padding-compact: 1rem; --card-padding-spacious: 2rem; --card-gap: 1rem; --card-bg: var(--surface-raised); --card-border: 1px solid var(--border-subtle); --card-radius: var(--radius-m); --card-shadow: var(--shadow-s); --card-shadow-hover: var(--shadow-m); --card-transition: var(--duration-normal) var(--ease-default); /* ── Data card (KPI tiles, stat blocks) ── */ --data-card-bg: var(--surface-tinted); --data-card-border: 1px solid var(--border-default); --data-card-accent-strip: 3px solid var(--primary); /* left-edge stripe */ --data-card-radius: var(--radius-m); --data-card-padding: 1.25rem; /* ─────────────────────────────────────────────────────────────────── §11 FORMS ─────────────────────────────────────────────────────────────────── Input block-padding = button block-padding (0.625em) → flush pairing. ─────────────────────────────────────────────────────────────────── */ --input-padding-block: 0.625em; --input-padding-inline: 0.75em; --input-font-size: var(--text-m); --input-line-height: var(--leading-normal); --input-bg: var(--surface-sunken); --input-bg-hover: var(--surface-tinted); --input-border: 1px solid var(--border-default); --input-border-hover: 1px solid var(--border-strong); --input-border-focus: 2px solid var(--border-focus); --input-border-error: 2px solid var(--feedback-error); --input-border-success: 2px solid var(--feedback-success); --input-radius: var(--radius-s); --input-placeholder: var(--text-subtle); --input-transition: var(--duration-fast) var(--ease-default); --input-min-height: 2.75rem; /* 44px — touch target ✅ */ /* ── Labels (ALL-CAPS, muted) ── */ --label-font-size: var(--text-label); --label-font-weight: var(--weight-semibold); --label-tracking: var(--tracking-caps); --label-text-transform: uppercase; --label-color: var(--text-muted); --label-gap: var(--space-2xs); /* ── Form group rhythm ── */ --form-group-gap: var(--space-m); --form-section-gap: var(--space-xl); /* ─────────────────────────────────────────────────────────────────── §12 GRIDS ─────────────────────────────────────────────────────────────────── */ /* ── Fixed columns ── */ --grid-1: 1fr; --grid-2: repeat(2, 1fr); --grid-3: repeat(3, 1fr); --grid-4: repeat(4, 1fr); --grid-5: repeat(5, 1fr); --grid-6: repeat(6, 1fr); /* ── Named structural layouts ── */ --grid-sidebar-left: var(--sidebar-width) 1fr; --grid-sidebar-right: 1fr var(--sidebar-width); --grid-golden: 1fr 1.618fr; --grid-golden-reverse: 1.618fr 1fr; --grid-wide-narrow: 2fr 1fr; --grid-narrow-wide: 1fr 2fr; --grid-dashboard: var(--sidebar-width) 1fr var(--sidebar-width); /* ── Responsive auto-grids ── */ --auto-grid-xs: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); --auto-grid-s: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); --auto-grid-m: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); --auto-grid-l: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); --auto-grid-xl: repeat(auto-fit, minmax(min(28rem, 100%), 1fr)); /* ─────────────────────────────────────────────────────────────────── §13 BORDER RADII ─────────────────────────────────────────────────────────────────── */ --radius-none: 0; --radius-xs: 0.125rem; /* 2px — tight utility use */ --radius-s: 0.25rem; /* 4px — buttons, inputs */ --radius-m: 0.5rem; /* 8px — cards, dropdowns */ --radius-l: 0.75rem; /* 12px — modals, sheets */ --radius-xl: 1rem; /* 16px — panels */ --radius-2xl: 1.5rem; /* 24px — large containers */ --radius-full: 9999px; /* pills, progress, avatars */ --radius-round: 50%; /* true circles */ /* ─────────────────────────────────────────────────────────────────── §14 SHADOWS ─────────────────────────────────────────────────────────────────── Scrim uses hue 210 at near-zero chroma: avoids purple cast common with achromatic blacks. Layered system: ambient + key. ─────────────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px oklch(12% 0 210 / 6%); --shadow-s: 0 2px 4px oklch(12% 0 210 / 6%), 0 1px 2px oklch(12% 0 210 / 4%); --shadow-m: 0 4px 12px oklch(12% 0 210 / 8%), 0 2px 4px oklch(12% 0 210 / 4%); --shadow-l: 0 8px 24px oklch(12% 0 210 / 10%), 0 2px 8px oklch(12% 0 210 / 4%); --shadow-xl: 0 16px 48px oklch(12% 0 210 / 12%), 0 4px 16px oklch(12% 0 210 / 5%); --shadow-primary: 0 4px 20px color-mix(in oklch, var(--primary) 28%, transparent); --shadow-primary-lg: 0 8px 32px color-mix(in oklch, var(--primary) 22%, transparent); --shadow-inner: inset 0 2px 4px oklch(12% 0 210 / 6%); /* ─────────────────────────────────────────────────────────────────── §15 TRANSITIONS & EASING ─────────────────────────────────────────────────────────────────── Pharma = precision. Easing is purposeful: --ease-default → standard hover / focus interactions --ease-out → elements entering (decelerate to rest) --ease-in → elements leaving (accelerate away) --ease-in-out → transitions with enter + exit phases --ease-spring → DECORATIVE ONLY. Never on forms, tables, or data modals. Clinical UI earns trust through consistency, not playfulness. ─────────────────────────────────────────────────────────────────── */ --ease-default: cubic-bezier(0.25, 0.10, 0.25, 1.00); --ease-in: cubic-bezier(0.55, 0.00, 1.00, 0.45); --ease-out: cubic-bezier(0.16, 1.00, 0.30, 1.00); --ease-in-out: cubic-bezier(0.45, 0.00, 0.55, 1.00); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.00); /* decorative only */ --duration-instant: 80ms; /* press ripple, tooltip arrow */ --duration-fast: 150ms; /* hover states, button press */ --duration-normal: 250ms; /* dropdowns, tooltips, focus */ --duration-slow: 400ms; /* modals, panel slides */ --duration-slower: 600ms; /* hero / page-level */ --duration-page: 350ms; /* route / view transitions */ /* ─────────────────────────────────────────────────────────────────── §16 Z-INDEX — Stacking Context Contract ─────────────────────────────────────────────────────────────────── */ --z-behind: -1; --z-base: 1; --z-raised: 10; /* hover-elevated cards */ --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; --z-max: 9999; /* ─────────────────────────────────────────────────────────────────── §17 FOCUS — Accessible Keyboard Navigation ─────────────────────────────────────────────────────────────────── */ --focus-ring: 2px solid var(--primary); --focus-ring-offset: 2px; --focus-ring-inset: inset 0 0 0 2px var(--primary); /* no offset space */ /* ─────────────────────────────────────────────────────────────────── §18 ASPECT RATIOS ─────────────────────────────────────────────────────────────────── */ --ratio-square: 1 / 1; --ratio-landscape: 16 / 9; --ratio-portrait: 3 / 4; --ratio-card: 4 / 3; --ratio-wide: 21 / 9; --ratio-golden: 1.618 / 1; /* ─────────────────────────────────────────────────────────────────── §19 COMPONENT TOKENS — Pharma Design System Extensions ─────────────────────────────────────────────────────────────────── Production-ready tokens for patterns endemic to pharma / data sites. Components consume these; they never reach into §1 palette directly. ─────────────────────────────────────────────────────────────────── */ /* ── Badges & Pills ── */ --badge-padding-block: 0.2em; --badge-padding-inline: 0.5em; --badge-font-size: var(--text-xs); --badge-font-weight: var(--weight-semibold); --badge-radius: var(--radius-full); --badge-gap: var(--space-2xs); --badge-primary-bg: var(--primary-ultra-light); --badge-primary-text: var(--primary-semi-dark); /* 5.80:1 ✅ */ --badge-success-bg: var(--feedback-success-light); --badge-success-text: var(--feedback-success); --badge-warning-bg: var(--feedback-warning-light); --badge-warning-text: var(--feedback-warning); --badge-error-bg: var(--feedback-error-light); --badge-error-text: var(--feedback-error); --badge-accent-bg: var(--accent-ultra-light); --badge-accent-text: var(--accent-dark); /* 5.69:1 ✅ */ --badge-neutral-bg: var(--neutral-ultra-light); --badge-neutral-text: var(--text-muted); /* ── Tables ── */ --table-header-bg: var(--surface-tinted); --table-header-text: var(--text-muted); --table-header-font-size: var(--text-label); --table-header-tracking: var(--tracking-caps); --table-header-weight: var(--weight-semibold); --table-header-transform: uppercase; --table-row-height: 3rem; /* 48px — 8pt ✅ */ --table-row-stripe-bg: var(--surface-tinted); --table-border: 1px solid var(--border-subtle); --table-border-strong: 1px solid var(--border-default); --table-padding-block: var(--space-xs); --table-padding-inline: var(--space-m); --table-radius: var(--radius-m); --table-data-font: var(--font-mono); /* ── Dividers ── */ --divider: 1px solid var(--border-subtle); --divider-strong: 1px solid var(--border-default); --divider-accent: 2px solid var(--primary); /* ── Tooltips ── */ --tooltip-bg: var(--neutral-ultra-dark); --tooltip-text: var(--white); --tooltip-font-size: var(--text-xs); --tooltip-padding-block: 0.375rem; --tooltip-padding-inline: 0.625rem; --tooltip-radius: var(--radius-s); --tooltip-max-width: 16rem; --tooltip-shadow: var(--shadow-m); /* ── Progress / Status Indicators ── */ --progress-height: 0.5rem; /* 8px */ --progress-height-thin: 0.25rem; /* 4px */ --progress-radius: var(--radius-full); --progress-track-bg: var(--neutral-ultra-light); --progress-fill: var(--primary); --progress-fill-success: var(--feedback-success); --progress-fill-warning: var(--feedback-warning); --progress-fill-error: var(--feedback-error); /* ── Avatars ── */ --avatar-xs: 1.5rem; /* 24px */ --avatar-s: 2rem; /* 32px */ --avatar-m: 2.5rem; /* 40px */ --avatar-l: 3rem; /* 48px */ --avatar-xl: 4rem; /* 64px */ --avatar-radius: var(--radius-round); --avatar-bg: var(--primary-ultra-light); --avatar-text: var(--primary-semi-dark); /* ── Data Visualisation — clinical chart strokes ── */ --line-hairline: 0.5px; --line-thin: 1px; --line-default: 1.5px; --line-medium: 2px; --line-thick: 3px; --line-heavy: 4px; /* ── Navigation ── */ --nav-item-padding-block: var(--space-xs); --nav-item-padding-inline: var(--space-m); --nav-item-radius: var(--radius-s); --nav-item-active-bg: var(--surface-tinted); --nav-item-active-text: var(--primary); --nav-item-active-border: 2px solid var(--primary); --nav-item-hover-bg: color-mix(in oklch, var(--primary) 6%, transparent); /* ── Modals ── */ --modal-bg: var(--white); --modal-radius: var(--radius-l); --modal-shadow: var(--shadow-xl); --modal-padding: var(--space-xl); --modal-max-width-s: 28rem; /* 448px — confirm dialogs */ --modal-max-width-m: 42rem; /* 672px — standard modals */ --modal-max-width-l: 60rem; /* 960px — data review panes */ /* ── Tabs ── */ --tab-padding-block: var(--space-xs); --tab-padding-inline: var(--space-m); --tab-active-text: var(--primary); --tab-active-border: 2px solid var(--primary); --tab-inactive-text: var(--text-muted); --tab-hover-text: var(--primary-hover); --tab-transition: var(--duration-fast) var(--ease-default); /* ── Skip link — accessibility ── */ --skip-link-bg: var(--primary); --skip-link-text: var(--white); --skip-link-padding: var(--space-s) var(--space-m); /* ─────────────────────────────────────────────────────────────────── §20 BREAKPOINTS — Reference (documentation only) ─────────────────────────────────────────────────────────────────── Use in: @media (min-width: 48em) { … } Do not store in JS — CSS @custom-media when Houdini lands. Phone 30em 480px Tablet 48em 768px Desktop 64em 1024px Wide 85.375em 1366px = --content-width Ultra 100em 1600px ≈ --content-width-wide ─────────────────────────────────────────────────────────────────── */ } } /* end @layer tokens :root */ /* ════════════════════════════════════════════════════════════════════ THEME OVERRIDES ════════════════════════════════════════════════════════════════════ Applied via data attribute:
All overrides resolve through the same semantic token names. No component ever needs to know which theme is active. ════════════════════════════════════════════════════════════════════ */ @layer tokens { /* ─────────────────────────────────────────────────────────────────── THEME: DARK ─────────────────────────────────────────────────────────────────── Background: --black oklch(12% 0.007 210) Contrast on black background: text-main oklch 100% → 20.31:1 ✅ AAA text-body oklch 85% → 9.56:1 ✅ AAA text-muted oklch 70% → 5.31:1 ✅ AA text-subtle oklch 55% → 3.44:1 ✅ 3:1 UI text-link primary-light → 4.61:1 ✅ AA ─────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* Text */ --text-main: var(--white); --text-body: oklch(85% 0.004 210); --text-muted: oklch(70% 0.005 210); --text-subtle: oklch(55% 0.005 210); --text-link: var(--primary-light); --text-link-hover: var(--primary-ultra-light); --text-link-visited: var(--primary-semi-light); --text-accent: var(--primary-light); --icon-color: var(--primary-light); --card-accent: var(--primary-light); --card-accent-strip: 3px solid var(--primary-light); /* Surfaces */ --body-bg: var(--black); --surface-raised: var(--neutral-ultra-dark); --surface-sunken: oklch(15% 0.006 210); --surface-tinted: oklch(20% 0.028 191.9); --surface-highlight: oklch(22% 0.035 191.9); /* Borders */ --border-subtle: oklch(20% 0.006 210); --border-default: oklch(28% 0.006 210); --border-strong: oklch(40% 0.006 210); /* Cards */ --card-bg: var(--surface-raised); --card-border: 1px solid var(--border-subtle); --card-shadow: 0 2px 8px oklch(0% 0 0 / 30%); --data-card-bg: var(--surface-tinted); --data-card-border: 1px solid var(--border-default); /* Forms */ --input-bg: var(--surface-sunken); --input-bg-hover: var(--surface-tinted); --input-border: 1px solid var(--border-default); --input-border-hover: 1px solid var(--border-strong); /* Buttons */ --btn-primary-bg: var(--primary-light); --btn-primary-text: var(--primary-ultra-dark); --btn-primary-bg-hover: var(--primary); --btn-primary-bg-active: var(--primary-semi-dark); --btn-primary-shadow: 0 4px 20px color-mix(in oklch, var(--primary-light) 25%, transparent); --btn-outline-border: var(--primary-light); --btn-outline-text: var(--primary-light); --btn-outline-bg-hover: var(--primary-light); --btn-outline-text-hover: var(--primary-ultra-dark); --btn-ghost-text: var(--primary-light); --btn-ghost-bg-hover: color-mix(in oklch, var(--primary-light) 10%, transparent); /* Tables */ --table-header-bg: var(--surface-tinted); --table-row-stripe-bg: oklch(18% 0.020 191.9); --table-border: 1px solid var(--border-subtle); /* Nav */ --nav-item-active-bg: var(--surface-tinted); --nav-item-hover-bg: color-mix(in oklch, var(--primary-light) 8%, transparent); /* Progress */ --progress-track-bg: oklch(25% 0.005 210); /* Modals */ --modal-bg: var(--neutral-ultra-dark); /* Feedback — lighter on dark bg */ --feedback-success: oklch(55% 0.145 150); --feedback-warning: oklch(58% 0.125 72); --feedback-error: oklch(58% 0.165 25); --feedback-info: oklch(55% 0.085 210); } /* ─────────────────────────────────────────────────────────────────── THEME: PRIMARY ─────────────────────────────────────────────────────────────────── Background: --primary oklch(54.8% 0.094 191.9) MID-LUMINANCE — contrast ceiling 4.67:1. Hierarchy via weight & size. Never via opacity on text. Contrast on primary background: text-main white → 4.67:1 ✅ AA text-muted oklch(95% 0.01 191.9) → 4.52:1 ✅ AA text-link white → 4.67:1 ✅ AA border oklch(82% 0.02 191.9) → 3.10:1 ✅ 3:1 ─────────────────────────────────────────────────────────────────── */ [data-theme="primary"] { --text-main: var(--white); --text-body: var(--white); --text-muted: oklch(95% 0.010 191.9); /* 4.52:1 ✅ — absolute minimum */ --text-subtle: oklch(88% 0.015 191.9); /* icons / large text only */ --text-link: var(--white); --text-link-hover: var(--primary-ultra-light); --text-link-visited: oklch(92% 0.018 191.9); --body-bg: var(--primary); --surface-raised: var(--primary-semi-dark); --surface-sunken: var(--primary-dark); --surface-tinted: var(--primary-semi-dark); --surface-highlight: oklch(60% 0.088 191.9); --border-subtle: oklch(72% 0.032 191.9); --border-default: oklch(82% 0.020 191.9); /* 3.10:1 ✅ */ --border-strong: oklch(90% 0.012 191.9); --btn-primary-bg: var(--white); --btn-primary-text: var(--primary); /* 4.67:1 ✅ */ --btn-primary-bg-hover: var(--secondary); --btn-primary-bg-active: var(--secondary-dark); --btn-primary-shadow: 0 4px 20px oklch(20% 0.05 191.9 / 40%); --btn-outline-border: var(--white); --btn-outline-text: var(--white); --btn-outline-bg-hover: var(--white); --btn-outline-text-hover: var(--primary); --btn-ghost-text: var(--white); --btn-ghost-bg-hover: color-mix(in oklch, var(--white) 14%, transparent); --input-bg: var(--primary-dark); --input-bg-hover: var(--primary-semi-dark); --input-border: 1px solid oklch(75% 0.030 191.9); --nav-item-active-bg: oklch(60% 0.088 191.9); --nav-item-active-border: 2px solid var(--white); --nav-item-hover-bg: color-mix(in oklch, var(--white) 12%, transparent); } /* ─────────────────────────────────────────────────────────────────── THEME: SECONDARY ─────────────────────────────────────────────────────────────────── Background: --secondary oklch(92.5% 0.04 30) HIGH-LUMINANCE — dark text, no ceiling. Contrast on secondary (blush) background: text-main black → 16.03:1 ✅ AAA text-body neutral-dark → 8.95:1 ✅ AAA text-muted oklch(48% 0.008 210) → 5.18:1 ✅ AA text-link primary-semi-dark 44% → 5.80:1 ✅ AA border oklch(60% 0.04 191.9) → 3.05:1 ✅ 3:1 ─────────────────────────────────────────────────────────────────── */ [data-theme="secondary"] { --text-main: var(--black); --text-body: var(--neutral-dark); --text-muted: oklch(48% 0.008 210); /* 5.18:1 ✅ */ --text-subtle: oklch(58% 0.006 210); --text-link: var(--primary-semi-dark); /* 44% L → 5.80:1 ✅ */ --text-link-hover: var(--primary-hover); /* 47% L → 5.92:1 ✅ */ --text-link-visited: var(--primary-dark); --body-bg: var(--secondary); --surface-raised: var(--secondary-semi-light); --surface-sunken: var(--secondary-semi-dark); --surface-tinted: oklch(96% 0.025 191.9); /* teal wash on blush ground */ --surface-highlight: oklch(97% 0.022 191.9); --border-subtle: oklch(80% 0.022 191.9); --border-default: oklch(60% 0.040 191.9); /* 3.05:1 ✅ */ --border-strong: oklch(50% 0.050 191.9); --nav-item-active-bg: var(--surface-tinted); --nav-item-hover-bg: color-mix(in oklch, var(--primary) 6%, transparent); } } /* end @layer tokens themes */