/* ════════════════════════════════════════════════════════════════
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;
--ffl-sb-muted: #94a3b8;
--ffl-sb-hover: #f1f5f9;
--ffl-sb-active: #c41e1e;
--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);
/* 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;
/* 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;
--ffl-red: #e03535;
--ffl-red-hover: #c82c2c;
--ffl-red-soft: #2d1515;
--ffl-red-text: #e03535;
--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;
--ffl-sb-muted: #475569;
--ffl-sb-hover: #1e293b;
--ffl-sb-active: #e03535;
--ffl-sb-border: #1e293b;
--ffl-link: var(--ffl-blue-text);
--ffl-focus: var(--ffl-blue);
--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;
--ffl-red: #e03535;
--ffl-red-hover: #c82c2c;
--ffl-red-soft: #2d1515;
--ffl-red-text: #e03535;
--ffl-blue: #8bbfd4;
--ffl-blue-hover: #a8d0e0;
--ffl-blue-soft: #162330;
--ffl-blue-text: #8bbfd4;
--ffl-sb-bg: #0d1424;
--ffl-sb-text: #cbd5e1;
--ffl-sb-muted: #475569;
--ffl-sb-hover: #1e293b;
--ffl-sb-active: #e03535;
--ffl-sb-border: #1e293b;
--ffl-link: var(--ffl-blue-text);
--ffl-focus: var(--ffl-blue);
--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.5;
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;
color: var(--ffl-accent);
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: #f0fdf4;
color: #15803d;
}
.ffl-badge-amber {
background: #fffbeb;
color: #b45309;
}
.ffl-badge-purple {
background: #f5f3ff;
color: #6d28d9;
}
.ffl-badge-muted {
background: var(--ffl-line);
color: var(--ffl-muted);
}
[data-theme="dark"] .ffl-badge-green {
background: #052e16;
color: #4ade80;
}
[data-theme="dark"] .ffl-badge-amber {
background: #1c1000;
color: #fbbf24;
}
[data-theme="dark"] .ffl-badge-purple {
background: #1e1030;
color: #a78bfa;
}
/* ════════════════════════════════════════════════════════════════
CARDS
════════════════════════════════════════════════════════════════ */
.ffl-card {
background: var(--ffl-panel);
border: 1px solid var(--ffl-line);
border-radius: var(--ffl-r-lg);
padding: 1.25rem;
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: