/* ════════════════════════════════════════════════════════════════
FloForge Labs Design System — ffl.css
Hosted at floforgelabs.com/ffl.css
Import via:
Toggle dark mode:
document.documentElement.setAttribute('data-theme','dark')
document.documentElement.removeAttribute('data-theme')
════════════════════════════════════════════════════════════════ */
/* ─── Google Fonts ───────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap");
/* ════════════════════════════════════════════════════════════════
TOKENS — LIGHT MODE (default)
════════════════════════════════════════════════════════════════ */
:root {
/* Surface */
--ffl-bg: #f1f5f9;
--ffl-panel: #ffffff;
--ffl-panel-raised: #ffffff;
/* Type */
--ffl-ink: #1e293b;
--ffl-muted: #64748b;
--ffl-done: #94a3b8;
/* Borders */
--ffl-line: #e2e8f0;
--ffl-line-strong: #cbd5e1;
/* Brand — Red */
--ffl-red: #c41e1e;
--ffl-red-hover: #a81818;
--ffl-red-soft: #fff0f0;
--ffl-red-text: #c41e1e; /* links, labels */
/* Brand — Baby Blue */
--ffl-blue: #8bbfd4;
--ffl-blue-hover: #6aaec7;
--ffl-blue-soft: #eef6fa;
--ffl-blue-text: #2d7fa3; /* links in light mode — darker for contrast */
/* Sidebar — light in light mode */
--ffl-sb-bg: #ffffff;
--ffl-sb-text: #1e293b;
/* #94a3b8 measured 2.56:1 on white — failed WCAG AA. #64748b (the same
shade as --ffl-muted) passes at 4.76:1. See decisions.md for the
full contrast audit. */
--ffl-sb-muted: #64748b;
--ffl-sb-hover: #f1f5f9;
/* Always identical to --ffl-red in both themes — referencing it
directly (rather than duplicating the literal hex) is what makes
the dark-mode red nudge below apply here too, automatically. */
--ffl-sb-active: var(--ffl-red);
--ffl-sb-border: #e2e8f0;
/* Semantic aliases — apps use these */
--ffl-accent: var(--ffl-red);
--ffl-accent-hover: var(--ffl-red-hover);
--ffl-accent-soft: var(--ffl-red-soft);
--ffl-link: var(--ffl-red-text);
--ffl-focus: var(--ffl-blue);
/* Badge fills — muted/green/amber/purple (blue and red already use
their own semantic tokens above). Tokenized so the dark-mode-
appropriate values apply through the ordinary prefers-color-scheme
cascade, the same as everything else here, instead of only when
data-theme="dark" is literally present on — see decisions.md
for the audit that found badges going un-themed for users whose
dark mode comes from their OS and who've never touched the in-app
toggle. Light-mode values are unchanged from what these badges
already used, EXCEPT --ffl-badge-muted-text: #64748b measured
3.86:1 against this badge's pale fill — also a real AA failure,
fixed alongside the dark-mode pass since it's the same token. */
--ffl-badge-muted-bg: var(--ffl-line);
--ffl-badge-muted-text: #475569;
--ffl-badge-green-bg: #f0fdf4;
--ffl-badge-green-text: #15803d;
--ffl-badge-amber-bg: #fffbeb;
--ffl-badge-amber-text: #b45309;
--ffl-badge-purple-bg: #f5f3ff;
--ffl-badge-purple-text: #6d28d9;
/* Radius scale */
--ffl-r-sm: 0.375rem;
--ffl-r-md: 0.5rem;
--ffl-r-lg: 0.625rem;
--ffl-r-xl: 1rem;
--ffl-r-pill: 999px;
/* Spacing scale — card padding, gaps between cards, section rhythm.
Not theme-dependent (same in light/dark), so defined once here only. */
--ffl-space-xs: 0.5rem;
--ffl-space-sm: 0.75rem;
--ffl-space-md: 1rem;
--ffl-space-lg: 1.5rem;
--ffl-space-xl: 2rem;
--ffl-space-2xl: 2.5rem;
/* Shadow */
--ffl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--ffl-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
--ffl-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
/* Type scale */
--ffl-text-xs: 0.6875rem;
--ffl-text-sm: 0.8125rem;
--ffl-text-base: 0.9375rem;
--ffl-text-lg: 1.125rem;
--ffl-text-xl: 1.375rem;
--ffl-text-2xl: 1.75rem;
/* Transition */
--ffl-trans: 0.15s ease;
}
/* ════════════════════════════════════════════════════════════════
TOKENS — DARK MODE
Applied when: OS prefers dark, OR data-theme="dark" on
════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ffl-bg: #0f172a;
--ffl-panel: #1e293b;
--ffl-panel-raised: #263348;
--ffl-ink: #e2e8f0;
--ffl-muted: #94a3b8;
--ffl-done: #475569;
--ffl-line: #334155;
--ffl-line-strong: #475569;
/* #e03535 (the original value) put white button text at 4.44:1 —
just under the 4.5:1 AA minimum. #dd3535 is the smallest darkening
(R only, 224→221; G/B unchanged) that clears it, at 4.53:1 — see
decisions.md for the search and why one step further than the
razor-thin 4.5001:1 minimum was chosen. */
--ffl-red: #dd3535;
--ffl-red-hover: #fca5a5;
--ffl-red-soft: #2d1515;
/* Brightened from #e03535 (the pre-nudge value of --ffl-red, meant
for solid fills): at 3.85:1 on the badge fill and 3.30:1 on a
plain card, that failed WCAG AA's 4.5:1 for text. #f87171
(Tailwind red-400 — same "-400 for dark-mode text" pattern used by
the badge tokens below) passes 4.5:1+ on every surface this token
is actually used against — see decisions.md for the full contrast
audit. */
--ffl-red-text: #f87171;
--ffl-blue: #8bbfd4;
--ffl-blue-hover: #a8d0e0;
--ffl-blue-soft: #162330;
--ffl-blue-text: #8bbfd4; /* full baby blue for links in dark */
--ffl-sb-bg: #0d1424;
--ffl-sb-text: #cbd5e1;
/* #475569 measured 2.43:1 against --ffl-sb-bg — the worst failure
found in this audit (the sidebar's "Admin" section label was
genuinely hard to read). Reusing --ffl-muted's dark value
(#94a3b8, already proven at 5.71-7.17:1 elsewhere in this file)
passes at 7.17:1. See decisions.md. */
--ffl-sb-muted: #94a3b8;
--ffl-sb-hover: #1e293b;
--ffl-sb-active: var(--ffl-red);
--ffl-sb-border: #1e293b;
--ffl-link: var(--ffl-blue-text);
--ffl-focus: var(--ffl-blue);
/* --ffl-badge-muted-bg reuses --ffl-panel-raised rather than
--ffl-line: the badge previously read var(--ffl-line) directly
(#334155), which measured only 4.04:1 against --ffl-muted text —
a real AA failure (it's the account-email badge shown on every
page, plus "Not scanned"/"You"/"User" badges, so a common,
highly visible element). #263348 passes at 4.97:1.
--ffl-badge-muted-text is explicitly set to var(--ffl-muted)
below, not left undeclared — it's a literal value in :root
(chosen for light mode's pale fill), not a var() reference, so
leaving it undeclared here previously meant dark mode silently
kept the light-mode literal instead of "inheriting" anything.
green/amber/purple below were previously only reachable via
[data-theme="dark"] class selectors further down this file, so
a user whose dark mode comes purely from their OS (never
manually toggled in-app) got the light-mode badge colours
instead — tokenizing them the same way --ffl-red-text already
is closes that gap. See decisions.md for the full audit. */
--ffl-badge-muted-bg: var(--ffl-panel-raised);
/* Bug fix: --ffl-badge-muted-text is a LITERAL value in :root
(#475569, chosen for light mode's pale badge fill), not a
var(--ffl-muted) reference — so leaving it undeclared here (as
the previous pass did, on the mistaken assumption it would
"inherit" the dark --ffl-muted value) meant dark mode silently
kept the light-mode literal. Measured: #475569 on this badge's
dark fill (--ffl-panel-raised, #263348) is 1.68:1 — drastically
worse than the "failure" this token was supposed to fix, and
exactly what was reported as the account-email badge being
near-unreadable. Explicitly set here (and in the matching
[data-theme="dark"] block below) to var(--ffl-muted), which
really is dark-appropriate (#94a3b8) — 4.97:1 against this same
fill. See decisions.md. */
--ffl-badge-muted-text: var(--ffl-muted);
--ffl-badge-green-bg: #052e16;
--ffl-badge-green-text: #4ade80;
--ffl-badge-amber-bg: #1c1000;
--ffl-badge-amber-text: #fbbf24;
--ffl-badge-purple-bg: #1e1030;
--ffl-badge-purple-text: #a78bfa;
--ffl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--ffl-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
--ffl-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
}
}
[data-theme="dark"] {
--ffl-bg: #0f172a;
--ffl-panel: #1e293b;
--ffl-panel-raised: #263348;
--ffl-ink: #e2e8f0;
--ffl-muted: #94a3b8;
--ffl-done: #475569;
--ffl-line: #334155;
--ffl-line-strong: #475569;
/* Kept identical to the @media (prefers-color-scheme: dark) block
above — see the comment there for the contrast rationale. */
--ffl-red: #dd3535;
--ffl-red-hover: #fca5a5;
--ffl-red-soft: #2d1515;
--ffl-red-text: #f87171;
--ffl-blue: #8bbfd4;
--ffl-blue-hover: #a8d0e0;
--ffl-blue-soft: #162330;
--ffl-blue-text: #8bbfd4;
--ffl-sb-bg: #0d1424;
--ffl-sb-text: #cbd5e1;
/* Kept identical to the @media (prefers-color-scheme: dark) block
above — see the comment there for the contrast rationale. */
--ffl-sb-muted: #94a3b8;
--ffl-sb-hover: #1e293b;
--ffl-sb-active: var(--ffl-red);
--ffl-sb-border: #1e293b;
--ffl-link: var(--ffl-blue-text);
--ffl-focus: var(--ffl-blue);
/* Kept identical to the @media (prefers-color-scheme: dark) block
above — see the comment there for the contrast/theming rationale. */
--ffl-badge-muted-bg: var(--ffl-panel-raised);
--ffl-badge-muted-text: var(--ffl-muted);
--ffl-badge-green-bg: #052e16;
--ffl-badge-green-text: #4ade80;
--ffl-badge-amber-bg: #1c1000;
--ffl-badge-amber-text: #fbbf24;
--ffl-badge-purple-bg: #1e1030;
--ffl-badge-purple-text: #a78bfa;
--ffl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--ffl-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
--ffl-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
}
/* ════════════════════════════════════════════════════════════════
RESET
════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ════════════════════════════════════════════════════════════════
BASE
════════════════════════════════════════════════════════════════ */
body {
font-family: "Inter", sans-serif;
font-size: var(--ffl-text-base);
line-height: 1.6;
background: var(--ffl-bg);
color: var(--ffl-ink);
-webkit-font-smoothing: antialiased;
transition:
background var(--ffl-trans),
color var(--ffl-trans);
}
button {
font-family: inherit;
cursor: pointer;
}
a {
color: var(--ffl-link);
text-decoration: none;
transition: opacity var(--ffl-trans);
}
a:hover {
opacity: 0.8;
text-decoration: underline;
}
/* ════════════════════════════════════════════════════════════════
TYPOGRAPHY UTILITIES
════════════════════════════════════════════════════════════════ */
.ffl-display {
font-family: "Barlow Condensed", sans-serif;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.1;
}
.ffl-label {
font-size: var(--ffl-text-xs);
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ffl-muted);
}
.ffl-muted {
color: var(--ffl-muted);
}
.ffl-accent {
color: var(--ffl-accent);
}
.ffl-blue {
color: var(--ffl-blue-text);
}
/* ════════════════════════════════════════════════════════════════
SCROLLBAR
════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-thumb {
background: var(--ffl-line-strong);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--ffl-muted);
}
/* ════════════════════════════════════════════════════════════════
BUTTONS
════════════════════════════════════════════════════════════════ */
.ffl-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1.125rem;
border-radius: var(--ffl-r-md);
border: none;
font-size: var(--ffl-text-sm);
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition:
opacity var(--ffl-trans),
background var(--ffl-trans);
white-space: nowrap;
}
.ffl-btn-primary {
background: var(--ffl-accent);
color: #fff;
}
.ffl-btn-primary:hover {
opacity: 0.88;
}
.ffl-btn-secondary {
background: var(--ffl-blue-soft);
color: var(--ffl-blue-text);
border: 1px solid var(--ffl-blue);
}
.ffl-btn-secondary:hover {
opacity: 0.88;
}
.ffl-btn-ghost {
background: none;
color: var(--ffl-muted);
border: 1px solid var(--ffl-line);
}
.ffl-btn-ghost:hover {
background: var(--ffl-bg);
color: var(--ffl-ink);
}
.ffl-btn-danger {
background: none;
/* --ffl-red-text (not --ffl-accent/--ffl-red, the solid-fill brand
colour) — this is red used AS TEXT, same as .ffl-badge-red and the
"Delete" row action, and needs the same dark-mode contrast tuning.
Identical value to --ffl-accent in light mode, so no visual change
there. */
color: var(--ffl-red-text);
border: 1px solid var(--ffl-red-soft);
}
.ffl-btn-danger:hover {
background: var(--ffl-red-soft);
}
.ffl-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* ════════════════════════════════════════════════════════════════
BADGES
════════════════════════════════════════════════════════════════ */
.ffl-badge {
display: inline-flex;
align-items: center;
font-size: var(--ffl-text-xs);
font-weight: 500;
padding: 0.1rem 0.5rem;
border-radius: var(--ffl-r-pill);
white-space: nowrap;
}
.ffl-badge-red {
background: var(--ffl-red-soft);
color: var(--ffl-red-text);
}
.ffl-badge-blue {
background: var(--ffl-blue-soft);
color: var(--ffl-blue-text);
}
.ffl-badge-green {
background: var(--ffl-badge-green-bg);
color: var(--ffl-badge-green-text);
}
.ffl-badge-amber {
background: var(--ffl-badge-amber-bg);
color: var(--ffl-badge-amber-text);
}
.ffl-badge-purple {
background: var(--ffl-badge-purple-bg);
color: var(--ffl-badge-purple-text);
}
.ffl-badge-muted {
background: var(--ffl-badge-muted-bg);
color: var(--ffl-badge-muted-text);
}
/* ════════════════════════════════════════════════════════════════
CARDS
════════════════════════════════════════════════════════════════ */
.ffl-card {
background: var(--ffl-panel);
border: 1px solid var(--ffl-line);
border-radius: var(--ffl-r-lg);
padding: var(--ffl-space-lg);
transition: border-color var(--ffl-trans);
}
.ffl-card:hover {
border-color: var(--ffl-line-strong);
}
.ffl-card-interactive {
cursor: pointer;
}
.ffl-card-interactive:hover {
border-color: var(--ffl-accent);
}
/* ════════════════════════════════════════════════════════════════
FORM INPUTS
════════════════════════════════════════════════════════════════ */
.ffl-input,
.ffl-textarea,
.ffl-select {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--ffl-line);
border-radius: var(--ffl-r-md);
font-size: var(--ffl-text-base);
font-family: inherit;
color: var(--ffl-ink);
background: var(--ffl-bg);
transition:
border-color var(--ffl-trans),
background var(--ffl-trans);
outline: none;
}
.ffl-input:focus,
.ffl-textarea:focus,
.ffl-select:focus {
border-color: var(--ffl-focus);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ffl-focus) 20%, transparent);
}
.ffl-textarea {
resize: vertical;
min-height: 80px;
}
/* ════════════════════════════════════════════════════════════════
SIDEBAR
════════════════════════════════════════════════════════════════ */
.ffl-sidebar {
background: var(--ffl-sb-bg);
color: var(--ffl-sb-text);
border-right: 1px solid var(--ffl-sb-border);
transition: background var(--ffl-trans);
}
.ffl-sidebar-logo {
font-family: "Barlow Condensed", sans-serif;
font-weight: 700;
font-size: var(--ffl-text-2xl);
letter-spacing: 0.01em;
line-height: 1;
}
.ffl-sidebar-logo .ffl-logo-flo {
color: var(--ffl-sb-text);
}
.ffl-sidebar-logo .ffl-logo-app {
color: var(--ffl-sb-active);
}
.ffl-nav-item {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0.75rem;
border-radius: var(--ffl-r-md);
font-size: var(--ffl-text-sm);
color: var(--ffl-sb-text);
cursor: pointer;
transition:
background var(--ffl-trans),
color var(--ffl-trans);
border: none;
background: none;
width: 100%;
text-align: left;
font-family: inherit;
}
.ffl-nav-item:hover {
background: var(--ffl-sb-hover);
}
.ffl-nav-item.active {
background: var(--ffl-sb-active);
color: #fff;
}
.ffl-nav-label {
font-size: var(--ffl-text-xs);
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ffl-sb-muted);
padding: 0.25rem 0.75rem;
margin-top: 1rem;
}
/* ════════════════════════════════════════════════════════════════
DARK MODE TOGGLE UTILITY
Usage: