/* ============================================================================ TrialCatcher Network — design tokens (trialcatcher.com) --------------------------------------------------------------------------- Direction: "futuristic clinical-research social network" — luminous content on a receding deep-forest chrome frame. BRAND (Marcos 2026-08-21, F:\Screenshots\color combination.png + logo.png): DEFAULT = palette C "Comfortable Dark-Soft" (Marcos 2026-08-22): muted forest chrome #26473A, primary #35674B, dusty apricot #C97A4E, bone canvas; header #F97B3D with white pills (dark: #4A2E1B). A/B alternates retired 2026-08-23 (palettes.css deleted; git history has them). HIG depth (chrome recedes, layers carry meaning) + Material-3 token discipline (roles, state layers, tonal surfaces). ALL contrast ratios below are measured, not estimated. AA (4.5:1) is the floor for text, 3:1 for control borders / focus rings. Every var is `--net-`. Never hardcode a hex in a component. ============================================================================ */ :root { color-scheme: light; /* --- Type families ------------------------------------------------------ ONE webfont: Space Grotesk (variable, self-hosted woff2 — no CDN, CSP/HIPAA posture). Display + eyebrow + numerals only; body stays on the system UI stack for legibility at 15px and zero layout shift. */ --net-font-display: "Space Grotesk", ui-sans-serif, "Segoe UI", system-ui, -apple-system, sans-serif; --net-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --net-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace; /* --- Brand ------------------------------------------------------------- */ --net-primary: #35674B; /* brand green — 8.14:1 on white, text+fill safe */ --net-primary-strong: #264C36; /* hover/pressed fill; white on it >10:1 */ --net-primary-soft: #E1EBE3; /* tonal container; primary on it 7.0:1 */ --net-on-primary: #FFFFFF; /* 8.14:1 on --net-primary */ --net-secondary: #C97A4E; /* brand ORANGE — graphic/large only (3.11:1) */ --net-tertiary: #3D8E9B; /* logo teal — graphic/presence (4.18:1) */ --net-tertiary-ink: #2A6E7A; /* teal text twin 5.76:1 */ --net-secondary-ink: #9B5028; /* orange text twin 5.76:1 on white */ /* --- Surfaces ---------------------------------------------------------- Work column is the lightest plane; the two frame columns sit a step deeper so white cards read as objects ON a band. Chrome is the darkest. */ --net-canvas: #FAF8F4; /* work column background */ --net-card: #FFFFFF; /* every card, on any surface */ --net-sunken: #F3F0EA; /* inputs, code, empty wells */ --net-band-context: #F0EEE7; /* LEFT frame column (identity / context) */ --net-band-chat: #EBE9E1; /* RIGHT frame column (Smoke Signals, live) */ --net-chrome: #26473A; /* deep forest — header + menu + footer */ /* header + left menu + footer, one mass */ --net-chrome-raise: #35604F; /* active menu row, chrome hover */ --net-chrome-line: rgba(255,255,255,.10); /* --- Header band (palette C "Comfortable Dark-Soft", Marcos 2026-08-22: header #F97B3D, white pills, forest ink). Menu + footer stay forest chrome. Ink is dark, not white: white on #F97B3D is only 3.1:1. */ --net-header-bg: #F97B3D; --net-header-raise: #FFFFFF; /* search + user-menu pills = solid white */ --net-header-line: rgba(36,22,8,.14); --net-header-ink: #241608; /* 8.66:1 on header bg */ --net-header-ink-muted: #3F2610; /* 5.3:1 on header bg */ --net-header-ink-active: #0C2E1E; /* 5.6:1 on header bg — brand forest */ /* --- Ink --------------------------------------------------------------- Worst-case surface for each is noted; all pass AA there. */ --net-ink: #2A2F27; /* 17.9:1 white · 17.1:1 canvas · 15.1:1 band */ --net-ink-2: #55604F; /* 6.78:1 white · 6.40:1 canvas · 5.62:1 band */ --net-ink-3: #626B5C; /* 5.51:1 white · 5.45:1 canvas · 4.56:1 band (deepest) */ --net-ink-faint: #A9AC9F; /* NON-TEXT ONLY — dividers, disabled glyphs */ --net-chrome-ink: #D3E0D8; /* 11.3:1 on --net-chrome */ --net-chrome-ink-muted: #9DB2A6; /* 6.08:1 on --net-chrome */ --net-chrome-ink-active: #FFFFFF; /* 18.2:1 on --net-chrome */ /* --- Lines -------------------------------------------------------------- */ --net-hairline: #E2DFD5; /* decorative dividers, card edge */ --net-hairline-strong: #7E8373; /* 3.06:1 — form-control + toggle borders */ /* --- Status (graphic value / text value are DIFFERENT on purpose) ------- */ --net-success: #2F7D53; --net-success-ink: #2A6A47; /* ink 5.35:1 white */ --net-warn: #C97A4E; --net-warn-ink: #9B5028; /* ink 5.18:1 white */ --net-danger: #C0534A; --net-danger-ink: #A93B33; /* 4.98:1 both ways */ --net-info: #33709E; --net-info-ink: #2A5E85; /* 4.86:1 white */ --net-success-soft: #E3EFE7; --net-warn-soft: #F7E9DC; --net-danger-soft: #F7E7E5; --net-info-soft: #E5EDF4; /* The "against" half of a two-segment share bar (passed / did not pass). PALE and MATTE on purpose (Marcos 2026-08-27): --net-danger is a saturated alert colour, and painted at bar width beside the deep brand green it shouts. This is a dusty clay at the same low chroma as the rest of the palette — it reads as the other half of one bar, not as an alarm attached to it. */ --net-against: #C99A92; /* --- Focus (one ring works on light bands AND dark chrome) -------------- */ --net-focus: #479AA7; /* 4.50:1 on white · 3.81:1 on chrome */ --net-focus-ring: 0 0 0 3px color-mix(in srgb, var(--net-focus) 45%, transparent); --net-focus-width: 2px; --net-focus-offset:2px; /* --- State layers (M3 discipline — overlay opacity, never an ad-hoc hex) */ --net-state-hover: .06; --net-state-focus: .10; --net-state-press: .12; --net-state-selected: .10; /* --- Type scale (7 styles total — do not add an 8th) -------------------- */ --net-fs-display: 2rem; --net-lh-display: 1.12; --net-ls-display: -.02em; /* 32/700 display font */ --net-fs-h1: 1.5rem; --net-lh-h1: 1.2; --net-ls-h1: -.015em; /* 24/700 display font */ --net-fs-h2: 1.125rem; --net-lh-h2: 1.3; --net-ls-h2: -.01em; /* 18/600 display font */ --net-fs-h3: .9375rem; --net-lh-h3: 1.35; --net-ls-h3: -.005em; /* 15/600 body font */ --net-fs-body: .9375rem; --net-lh-body: 1.55; --net-ls-body: 0; /* 15/400 */ --net-fs-small: .8125rem; --net-lh-small: 1.45; --net-ls-small: 0; /* 13/400 meta, chat */ --net-fs-eyebrow: .6875rem; --net-lh-eyebrow: 1.1; --net-ls-eyebrow: .08em; /* 11/600 CAPS display */ --net-fw-regular: 400; --net-fw-medium: 500; --net-fw-semibold: 600; --net-fw-bold: 700; /* --- Radii -------------------------------------------------------------- */ --net-radius-xs: 4px; /* chips, tags, small inputs (Marcos 08-22: flat, 5px max) */ --net-radius-sm: 5px; /* buttons, avatars-square, media */ --net-radius-md: 5px; /* cards, study tiles */ --net-radius-lg: 5px; /* panels, modals, hero blocks */ --net-radius-pill: 999px; /* --- Elevation (navy-tinted, never pure black) -------------------------- */ --net-elev-0: none; --net-elev-1: 0 1px 2px rgba(12,46,30,.05), 0 1px 3px rgba(12,46,30,.06); --net-elev-2: 0 4px 8px -2px rgba(12,46,30,.08), 0 2px 4px -2px rgba(12,46,30,.06); --net-elev-3: 0 12px 24px -6px rgba(12,46,30,.12), 0 4px 8px -4px rgba(12,46,30,.08); --net-glow: 0 8px 24px -8px rgba(53,103,75,.30); /* primary CTA hover only */ /* --- Glass (sticky panel headers + the favorite button over tile media) - */ --net-glass-bg: rgba(255,255,255,.76); --net-glass-blur: 14px; --net-glass-border: rgba(42,47,39,.10); /* --- Signature gradients (brand column aurora + AMS ladder ring) --------- */ --net-aurora: radial-gradient(120% 80% at 50% 0%, #E2F1E7 0%, rgba(226,241,231,0) 62%), radial-gradient(90% 60% at 80% 100%, rgba(232,112,10,.14) 0%, rgba(232,112,10,0) 70%); --net-ams-track: #E2DFD5; --net-ams-fill: conic-gradient(from -90deg, var(--net-primary), var(--net-secondary)); /* --- Spacing (8px base) -------------------------------------------------- */ --net-space-1: 4px; --net-space-2: 8px; --net-space-3: 12px; --net-space-4: 16px; --net-space-5: 24px; --net-space-6: 32px; --net-space-7: 48px; --net-space-8: 64px; /* --- Shell geometry (the layout is FIXED — these are the only knobs) ----- */ --net-header-h: 56px; --net-footer-h: 40px; --net-menu-w: 235px; /* matches the backoffice sidenav (--ct-sidenav-width) — Marcos 2026-08-24 */ --net-menu-w-collapsed: 56px; --net-grid-cols: 3fr 5fr 3fr 3fr; /* context : work : chat : brand */ --net-panel-pad: 16px; /* inside each scrolling column */ --net-panel-gap: 0px; /* columns are ADJACENT — hairline, no gap */ --net-card-gap: 12px; /* vertical rhythm between stacked cards */ --net-tap-min: 44px; /* HIG minimum hit target */ --net-icon-size: 20px; /* outline icons, 1.5px stroke, 20px grid */ --net-avatar-sm: 32px; --net-avatar-md: 40px; --net-avatar-lg: 96px; /* --- Motion -------------------------------------------------------------- */ --net-dur-fast: 120ms; /* hover, focus, checkbox */ --net-dur: 180ms; /* panel/tab/state change */ --net-dur-slow: 260ms; /* menu collapse, slide-over, entrance */ --net-ease: cubic-bezier(.2,.8,.2,1); --net-ease-in: cubic-bezier(.4,0,1,1); --net-spring: cubic-bezier(.34,1.56,.64,1); /* favorite/heart pop ONLY */ } /* ============================ DARK ========================================== Not an inversion. Chrome goes near-black, the work canvas becomes the deep plane, and the two frame bands go DARKER than the canvas (same job: they frame). Ink and brand are re-picked for the new backgrounds. */ [data-theme="dark"] { color-scheme: dark; --net-canvas: #141A16; --net-card: #1E2620; --net-sunken: #19211B; --net-band-context: #17201A; --net-band-chat: #141C17; --net-chrome: #1B2A22; --net-chrome-raise: #2B4335; --net-chrome-line: rgba(255,255,255,.10); --net-header-bg: #4A2E1B; /* palette C dark header (deep cocoa-orange) */ --net-header-raise: rgba(255,255,255,.12); --net-header-line: rgba(255,255,255,.10); --net-header-ink: #F7E7D6; /* 10.22:1 */ --net-header-ink-muted: #CBB39B; /* 6.16:1 */ --net-header-ink-active: #9BDCB6; /* 7.84:1 */ --net-primary: #74C596; /* brand green, lightened for dark */ --net-primary-strong: #97D8B2; --net-primary-soft: #1F3B2B; --net-on-primary: #0B2015; --net-secondary: #E0A177; --net-secondary-ink: #EBB894; --net-tertiary: #55AFBD; --net-tertiary-ink: #86CFDA; --net-ink: #E7ECE6; /* 15.9:1 canvas · 13.2:1 card */ --net-ink-2: #ADB8AF; /* 8.8:1 canvas · 7.8:1 card */ --net-ink-3: #859188; /* 5.1:1 canvas · 4.6:1 card */ --net-ink-faint: #505A53; /* NON-TEXT ONLY */ --net-chrome-ink: #CBDACF; --net-chrome-ink-muted: #93A899; --net-chrome-ink-active: #FFFFFF; --net-hairline: #2A352E; --net-hairline-strong: #68766C; --net-success: #74C596; --net-success-ink: #74C596; --net-warn: #E0A177; --net-warn-ink: #EBB894; --net-danger: #F08C84; --net-danger-ink: #F08C84; /* 6.6:1 on card */ --net-info: #7BB2E0; --net-info-ink: #7BB2E0; /* 7.4:1 on card */ --net-success-soft: #1C3527; --net-warn-soft: #37281B; --net-danger-soft: #34211F; --net-info-soft: #1B2B3B; --net-against: #A5736B; /* same role, lifted off the dark surface rather than the light one */ --net-focus: #55AFBD; --net-state-hover: .10; --net-state-focus: .14; --net-state-press: .18; --net-state-selected: .16; --net-elev-1: 0 1px 2px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04); --net-elev-2: 0 6px 14px -4px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.05); --net-elev-3: 0 18px 36px -10px rgba(0,0,0,.70), inset 0 1px 0 rgba(255,255,255,.06); --net-glow: 0 8px 28px -8px rgba(116,197,150,.30); --net-glass-bg: rgba(28,36,30,.76); --net-glass-border: rgba(255,255,255,.10); --net-aurora: radial-gradient(120% 80% at 50% 0%, rgba(95,207,138,.18) 0%, rgba(95,207,138,0) 62%), radial-gradient(90% 60% at 80% 100%, rgba(245,154,74,.16) 0%, rgba(245,154,74,0) 70%); --net-ams-track: #2A352E; } /* INERT since 2026-08-23: always carries data-theme="light"|"dark" (light default, "System" retired) — kept only as the OS-dark fallback for a page served without the attribute. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --net-canvas: #141A16; --net-card: #1E2620; --net-sunken: #19211B; --net-band-context: #17201A; --net-band-chat: #141C17; --net-chrome: #1B2A22; --net-chrome-raise: #2B4335; --net-chrome-line: rgba(255,255,255,.10); --net-header-bg:#4A2E1B; --net-header-raise:rgba(255,255,255,.12); --net-header-line:rgba(255,255,255,.10); --net-header-ink:#F7E7D6; --net-header-ink-muted:#CBB39B; --net-header-ink-active:#9BDCB6; --net-primary: #74C596; --net-primary-strong: #97D8B2; --net-primary-soft: #1F3B2B; --net-on-primary: #0B2015; --net-secondary: #E0A177; --net-secondary-ink: #EBB894; --net-tertiary: #55AFBD; --net-tertiary-ink: #86CFDA; --net-ink: #E7ECE6; --net-ink-2: #ADB8AF; --net-ink-3: #859188; --net-ink-faint: #505A53; --net-hairline: #2A352E; --net-hairline-strong: #68766C; --net-success: #74C596; --net-success-ink: #74C596; --net-warn: #E0A177; --net-warn-ink: #EBB894; --net-danger: #F08C84; --net-danger-ink: #F08C84; --net-info: #7BB2E0; --net-info-ink: #7BB2E0; --net-success-soft: #1C3527; --net-warn-soft: #37281B; --net-danger-soft: #34211F; --net-info-soft: #1B2B3B; --net-against: #A5736B; --net-focus: #55AFBD; --net-state-hover: .10; --net-state-focus: .14; --net-state-press: .18; --net-state-selected: .16; --net-elev-1: 0 1px 2px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04); --net-elev-2: 0 6px 14px -4px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.05); --net-elev-3: 0 18px 36px -10px rgba(0,0,0,.70), inset 0 1px 0 rgba(255,255,255,.06); --net-glow: 0 8px 28px -8px rgba(116,197,150,.30); --net-glass-bg: rgba(28,36,30,.76); --net-glass-border: rgba(255,255,255,.10); --net-aurora: radial-gradient(120% 80% at 50% 0%, rgba(95,207,138,.18) 0%, rgba(95,207,138,0) 62%), radial-gradient(90% 60% at 80% 100%, rgba(245,154,74,.16) 0%, rgba(245,154,74,0) 70%); --net-ams-track: #2A352E; /* --- baked from palette C (OS dark) — tokens the base block did not have ------------------- */ --net-chrome-ink: #CBDACF; --net-chrome-ink-muted: #93A899; --net-chrome-ink-active: #FFFFFF; } } /* Reduced motion: durations collapse, springs flatten. Every transition in the app must read its duration from these vars so this ONE block disables it. */ @media (prefers-reduced-motion: reduce) { :root { --net-dur-fast: 0ms; --net-dur: 0ms; --net-dur-slow: 0ms; --net-spring: linear; } } /* Reduced transparency: glass falls back to an opaque surface (HIG parity). */ @media (prefers-reduced-transparency: reduce) { :root { --net-glass-bg: var(--net-card); --net-glass-blur: 0px; } }