/*
* tokens.css — FinTools Unified Design System
* cardafresh.com
*
* Import this as the FIRST in every HTML file:
*
*
* Never define --bg, --surface, --blue, --ff, or --fs
* in individual tool files. Always use these tokens.
*/
/* ─────────────────────────────────────────
GOOGLE FONTS
All tools use these two fonts exclusively.
Do NOT import DM Sans anywhere.
⚠️ DO NOT use @import for fonts — it blocks rendering.
Instead paste these tags in every HTML BEFORE tokens.css:
───────────────────────────────────────── */
/* Fallback stack while async fonts load — prevents invisible text (FOIT) */
:root {
--ff-fallback: system-ui, -apple-system, 'Segoe UI', sans-serif;
--fs-fallback: Georgia, 'Times New Roman', serif;
}
/* ── CLS Prevention: metric-matched fallback for Plus Jakarta Sans ──
size-adjust/ascent/descent values measured to match PJS metrics.
Eliminates layout shift when web font swaps in over system-ui. */
@font-face {
font-family: 'Plus Jakarta Sans Fallback';
src: local('Arial'), local('Helvetica Neue'), local(system-ui);
size-adjust: 105%;
ascent-override: 92%;
descent-override: 22%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Instrument Serif Fallback';
src: local('Georgia'), local('Times New Roman');
size-adjust: 100%;
ascent-override: 90%;
descent-override: 23%;
line-gap-override: 0%;
}
/* ─────────────────────────────────────────
LIGHT MODE TOKENS (default)
───────────────────────────────────────── */
:root {
/* ── Backgrounds ── */
--bg: #f8fafc; /* page background */
--surface: #ffffff; /* card / panel surface */
--surf2: #f1f5f9; /* secondary surface */
--surf3: #e8eef5; /* tertiary / pressed state */
/* ── Borders ── */
--border: #e2e8f0;
--bord2: #cbd5e1;
/* ── Text ── */
--text: #0f172a; /* primary text */
--muted: #475569; /* secondary / helper text — darkened for WCAG AA on #f8fafc */
--muted2: #64748b; /* placeholder / disabled — darkened for WCAG AA */
/* ── Brand accent ── */
--blue: #2563eb;
--blue-h: #1d4ed8; /* hover */
--blue-l: #dbeafe; /* light tint */
--blue-d: #1e40af; /* dark variant */
/* ── Semantic colors ── */
--success: #059669;
--success-l:#d1fae5;
--warning: #d97706;
--warning-l:#fef3c7;
--danger: #dc2626;
--danger-l: #fee2e2;
--info: #0284c7;
--info-l: #e0f2fe;
/* ── Extended palette ── */
--green: #059669;
--green-l: #d1fae5;
--amber: #d97706;
--amber-l: #fef3c7;
--red: #dc2626;
--red-l: #fee2e2;
--violet: #7c3aed;
--violet-l: #ede9fe;
--pink: #db2777;
--pink-l: #fce7f3;
--sky: #0284c7;
--sky-l: #e0f2fe;
--gold: #f59e0b;
--gold-l: #fef3c7;
--silver: #94a3b8;
--bronze: #c97c3a;
/* ── Dark header (Cardafresh pattern — use on all tool heroes) ── */
--hero-bg: #060e1e;
--hero-bg-d:#04080f; /* dark mode variant */
/* ── Typography ── */
--ff: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', system-ui, -apple-system, sans-serif;
--fs: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman', serif;
/* ── Spacing scale ── */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
/* ── Border radius ── */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 20px;
--r-full:9999px;
/* ── Shadows ── */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
--shadow: 0 4px 24px -4px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.05);
--shadow-lg: 0 10px 40px -8px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
--shadow-blue: 0 4px 20px -4px rgba(37,99,235,0.30);
/* ── Transitions ── */
--ease: 0.2s ease;
--ease-slow: 0.35s ease;
/* ── Shell height (used by tools to offset content) ── */
--shell-h: 52px;
}
/* ─────────────────────────────────────────
DARK MODE TOKENS (html.dark)
Single convention — ALWAYS use html.dark.
Never use [data-theme="dark"].
───────────────────────────────────────── */
html.dark {
--bg: #080d18;
--surface: #0f1623;
--surf2: #141d2e;
--surf3: #1a2540;
--border: rgba(255,255,255,0.08);
--bord2: rgba(255,255,255,0.13);
--text: #f1f5f9;
--muted: #64748b;
--muted2: #475569;
--blue: #3b82f6;
--blue-h: #60a5fa;
--blue-l: rgba(37,99,235,0.16);
--blue-d: #2563eb;
--success-l:#052e16;
--warning-l:#2d1f00;
--danger-l: #2d0a0a;
--info-l: #082032;
--green-l: rgba(5,150,105,0.14);
--amber-l: rgba(217,119,6,0.14);
--red-l: rgba(220,38,38,0.14);
--violet-l: rgba(124,58,237,0.14);
--pink-l: rgba(219,39,119,0.14);
--sky-l: rgba(2,132,199,0.14);
--gold-l: rgba(245,158,11,0.14);
}
/* ─────────────────────────────────────────
GLOBAL RESET & BASE
───────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
}
body {
font-family: var(--ff);
font-size: 1rem;
font-weight: 500;
line-height: 1.6;
background: var(--bg);
color: var(--text);
transition: background var(--ease), color var(--ease);
/* push content below the shell header */
padding-top: var(--shell-h);
}
/* ── CLS prevention: reserve shell space before shell.js fires ──
Stops the layout shift from the injected nav bar pushing content down.
shell.js targets body > first child, so this placeholder gets replaced. */
body::before {
content: '';
display: block;
height: var(--shell-h);
margin-top: calc(-1 * var(--shell-h)); /* collapses — shell takes over */
visibility: hidden;
pointer-events: none;
}
/* ─────────────────────────────────────────
SHARED UTILITY CLASSES
Available across all tools.
───────────────────────────────────────── */
/* ── Typography ── */
.font-display { font-family: var(--fs); }
.font-body { font-family: var(--ff); }
.text-muted { color: var(--muted); }
.text-muted2 { color: var(--muted2); }
.text-blue { color: var(--blue); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
/* ── Surfaces ── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.card-elevated {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow);
}
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: 10px var(--sp-5);
border-radius: var(--r-md);
font-family: var(--ff);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all var(--ease);
border: none;
text-decoration: none;
white-space: nowrap;
}
.btn-primary {
background: var(--blue);
color: #fff;
}
.btn-primary:hover {
background: var(--blue-h);
box-shadow: var(--shadow-blue);
transform: translateY(-1px);
}
.btn-ghost {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
}
.btn-ghost:hover {
background: var(--surf2);
}
/* ── Badge / pill ── */
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: var(--r-full);
font-size: 0.75rem;
font-weight: 600;
}
.badge-blue { background: var(--blue-l); color: var(--blue); }
.badge-green { background: var(--green-l); color: var(--green); }
.badge-amber { background: var(--amber-l); color: var(--amber); }
.badge-red { background: var(--red-l); color: var(--red); }
.badge-violet { background: var(--violet-l); color: var(--violet); }
/* ── Input ── */
.input {
width: 100%;
padding: 10px var(--sp-3);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
font-family: var(--ff);
font-size: 0.9rem;
font-weight: 500;
color: var(--text);
transition: border-color var(--ease), box-shadow var(--ease);
outline: none;
}
.input:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px var(--blue-l);
}
/* ── Divider ── */
.divider {
border: none;
border-top: 1px solid var(--border);
margin: var(--sp-6) 0;
}
/* ── Trust dot ── */
.trust-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--success);
display: inline-block;
flex-shrink: 0;
}
/* ─────────────────────────────────────────
HERO HEADER (dark — Cardafresh pattern)
Use .tool-hero on the of each tool.
───────────────────────────────────────── */
.tool-hero {
background: var(--hero-bg);
padding: 40px 20px 52px;
text-align: center;
position: relative;
overflow: hidden;
}
.tool-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 60% at 50% 0%, rgba(37,99,235,0.18) 0%, transparent 70%),
radial-gradient(ellipse 40% 40% at 20% 80%, rgba(245,158,11,0.08) 0%, transparent 60%);
pointer-events: none;
}
html.dark .tool-hero { background: var(--hero-bg-d); }
/* ─────────────────────────────────────────
ANIMATIONS
───────────────────────────────────────── */
@keyframes ft-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ft-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-up { animation: ft-up 0.4s ease both; }
.animate-fade { animation: ft-fade 0.3s ease both; }
/* ─────────────────────────────────────────
RESPONSIVE HELPERS
───────────────────────────────────────── */
@media (max-width: 640px) {
:root { --shell-h: 48px; }
.tool-hero { padding: 32px 16px 44px; }
}