/* ============================================================ danielshred.com — shared design system ------------------------------------------------------------ Source of truth for studytracker.danielshred.com and lab.danielshred.com. Edit here; hooks copy to each app on deploy. Never edit the copy in an app directory. Dark mode: class-based. Set class="dark" on . ============================================================ */ :root { --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace; /* surfaces + lines + text */ --c-bg-1: #ffffff; --c-bg-2: #f6f5f2; --c-bg-3: #eeedea; --c-border: #e7e5df; --c-border-strong: #d6d3ca; --c-tx-1: #1c1b19; --c-tx-2: #57554f; --c-tx-3: #8c8a83; /* brand (purple) — accent/links/focus only, never a status */ --c-brand: #5b50d6; --c-brand-fg: #4439b0; --c-brand-bg: #eeedfe; --c-brand-border: #cecbf6; /* status — one meaning each: good / monitor / bad */ --c-ok-fg: #1d7a4f; --c-ok-bg: #e2f3e9; --c-warn-fg: #92560b; --c-warn-bg: #fbf0dc; --c-bad-fg: #b4221f; --c-bad-bg: #fbe9e7; /* Protocol Lab categorical — compounds + charts only */ --cat-hormone: #534ab7; --cat-peptide: #0f6e56; --cat-pharma: #5f5e5a; --cat-nootropic: #2e6fb5; --cat-supplement: #8c8a83; /* Study Tracker categorical — subjects only */ --cat-ccna: #2e6fb5; --cat-bandit: #1a7a5c; --cat-python: #8a5a14; --cat-packet: #534ab7; --cat-anki: #1a6e8a; /* radius */ --r-md: 6px; --r-lg: 10px; } .dark { --c-bg-1: #211f19; --c-bg-2: #16150f; --c-bg-3: #2b281f; --c-border: #34312a; --c-border-strong: #454238; --c-tx-1: #f2f0ea; --c-tx-2: #b8b5ac; --c-tx-3: #85827a; --c-brand: #8b82f0; --c-brand-fg: #b4acf7; --c-brand-bg: #221f3a; --c-brand-border: #3a3470; --c-ok-fg: #5fcb97; --c-ok-bg: #143a2c; --c-warn-fg: #e3b062; --c-warn-bg: #3a2a12; --c-bad-fg: #f08a86; --c-bad-bg: #3a1a18; --cat-hormone: #8b82f0; --cat-peptide: #36b894; --cat-pharma: #9a988f; --cat-nootropic: #6ba8e6; --cat-supplement: #a8a59c; --cat-ccna: #6ba8e6; --cat-bandit: #3bc494; --cat-python: #d4961e; --cat-packet: #8b82f0; --cat-anki: #34c4d8; } /* ── html baseline ─────────────────────────────────────────── */ html { background: var(--c-bg-2); color: var(--c-tx-1); font-family: var(--font-sans); } /* ── primitives ────────────────────────────────────────────── */ /* Card */ .pl-card { background: var(--c-bg-1); border: 0.5px solid var(--c-border); border-radius: var(--r-lg); padding: 16px; } /* Section label — mono uppercase */ .pl-section { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-tx-3); } /* Metric number */ .pl-metric { font-family: var(--font-mono); font-size: 30px; font-weight: 500; line-height: 1.1; color: var(--c-tx-1); } .pl-metric--sm { font-size: 18px; } /* Unit label */ .pl-unit { font-family: var(--font-mono); font-size: 11px; color: var(--c-tx-3); } /* Ledger row */ .pl-row { display: grid; align-items: center; gap: 8px; padding: 7px 12px; border-top: 0.5px solid var(--c-border); font-size: 13px; } .pl-num { font-family: var(--font-mono); font-size: 12px; } /* Badge */ .pl-badge { font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border-radius: var(--r-md); white-space: nowrap; } .pl-badge.is-ok { background: var(--c-ok-bg); color: var(--c-ok-fg); } .pl-badge.is-warn { background: var(--c-warn-bg); color: var(--c-warn-fg); } .pl-badge.is-bad { background: var(--c-bad-bg); color: var(--c-bad-fg); } .pl-badge.is-brand { background: var(--c-brand-bg); color: var(--c-brand-fg); } .pl-badge.is-muted { background: var(--c-bg-2); color: var(--c-tx-2); } /* Flag — severity left-border alert */ .pl-flag { background: var(--c-bg-1); border: 0.5px solid var(--c-border); border-radius: var(--r-lg); padding: 14px 16px; border-left: 3px solid var(--c-bad-fg); } .pl-flag.is-warn { border-left-color: var(--c-warn-fg); } .pl-flag.is-ok { border-left-color: var(--c-ok-fg); } .pl-flag.is-brand { border-left-color: var(--c-brand); } /* Category dot */ .pl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; vertical-align: middle; margin-right: 6px; flex-shrink: 0; } /* Protocol Lab subjects */ .pl-dot.cat-hormone { background: var(--cat-hormone); } .pl-dot.cat-peptide { background: var(--cat-peptide); } .pl-dot.cat-pharma { background: var(--cat-pharma); } .pl-dot.cat-nootropic { background: var(--cat-nootropic); } .pl-dot.cat-supplement { background: var(--cat-supplement); } /* Study Tracker subjects */ .pl-dot.cat-ccna { background: var(--cat-ccna); } .pl-dot.cat-bandit { background: var(--cat-bandit); } .pl-dot.cat-python { background: var(--cat-python); } .pl-dot.cat-packet { background: var(--cat-packet); } .pl-dot.cat-anki { background: var(--cat-anki); } /* AI output block */ .pl-ai { background: var(--c-brand-bg); border-radius: var(--r-lg); padding: 12px 14px; } /* Input */ .pl-input { font-family: var(--font-mono); font-size: 13px; padding: 6px 8px; border-radius: var(--r-md); border: 0.5px solid var(--c-border); background: var(--c-bg-3); color: var(--c-tx-1); outline: none; transition: border-color 0.15s; } .pl-input:focus { border-color: var(--c-brand); } /* Nav item */ .pl-nav { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--r-md); color: var(--c-tx-2); cursor: pointer; font-size: 13px; user-select: none; } .pl-nav:hover { background: var(--c-bg-2); } .pl-nav.is-on { background: var(--c-brand-bg); color: var(--c-brand-fg); font-weight: 500; } .pl-nav svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; } .pl-nav-tag { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--c-tx-3); } /* Chip */ .pl-chip { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: var(--r-md); background: var(--c-bg-3); color: var(--c-tx-2); white-space: nowrap; } /* Sparkline / range chart */ .pl-sparkline { display: block; } .pl-range-chart { display: block; width: 100%; }