/* ============================================================
DBS DESIGN TOKENS — extracted from the live Baseline Portal
Paste into your website's stylesheet (top of file, or a
tokens.css imported first). These are the EXACT values the
platform uses, so the marketing site and app share one brand.
============================================================ */
:root{
/* ---- Surfaces (note: warm green-black, NOT navy) ---- */
--bg-dark: #0c0f0d; /* page background */
--bg-panel: rgba(20, 25, 23, 0.92); /* cards / panels */
--bg-panel-2: rgba(22, 27, 25, 0.90);
--bg-inset: rgba(255, 255, 255, 0.05);
--bg-card: rgba(255, 255, 255, 0.05);
--bg-nav: rgba(16, 20, 18, 0.94); /* header/nav bar */
/* ---- Borders ---- */
--border: rgba(255, 255, 255, 0.11);
--border-soft: rgba(255, 255, 255, 0.06);
/* ---- Text ---- */
--text: #ffffff; /* headings */
--text-body: #e2e7e3; /* body copy */
--text-muted: #aeb8b2; /* secondary */
--text-dim: #8b958f; /* captions */
/* ---- Accent (warm amber) ---- */
--accent: #f5a02a; /* primary accent / CTA */
--accent-ink: #1a1e1c; /* text ON accent buttons */
--accent-bright: #ffb84d;
--accent-hover: #ffab38; /* CTA hover */
/* ---- Data / layer colors (reuse for charts, tags, icons) ---- */
--c-flood: #4fa0e0; /* blue */
--c-wetland: #3fbf94; /* green */
--c-zoning: #e6b34d; /* gold */
--danger: #c75c5c;
/* ---- Shape & depth ---- */
--panel-radius: 16px;
--panel-shadow: 0 22px 48px rgba(0, 0, 0, 0.6);
--panel-blur: blur(12px);
/* ---- Typography ---- */
--font-display: 'Archivo', system-ui, sans-serif; /* headings */
--font-sans: 'Public Sans', system-ui, sans-serif; /* body */
--font-mono: 'IBM Plex Mono', 'Fira Code', monospace;
}
/* ---- Load the same web fonts the platform uses ----
Add this to your (kept out of CSS to avoid @import perf cost):
*/
/* ============================================================
BASELINE STYLES using the tokens
============================================================ */
body{
background: var(--bg-dark);
color: var(--text-body);
font-family: var(--font-sans);
}
h1, h2, h3, h4{
font-family: var(--font-display);
color: var(--text);
font-weight: 700;
letter-spacing: -0.01em;
}
/* Numbers, accuracy figures, coordinates — use mono for that
"engineering instrument" feel (e.g. 0.1′, RMSE values) */
.data, .metric, .accuracy{ font-family: var(--font-mono); }
/* ---- Pill buttons (matched to platform accent) ---- */
.btn-pill{
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .8rem 1.6rem;
border-radius: 999px;
font-family: var(--font-sans);
font-weight: 600;
font-size: .95rem;
text-decoration: none;
cursor: pointer;
transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.btn-pill-primary{
background: var(--accent);
color: var(--accent-ink);
border: 1px solid var(--accent);
}
.btn-pill-primary:hover{
background: var(--accent-hover);
transform: translateY(-1px);
}
.btn-pill-secondary{
background: transparent;
color: var(--text-body);
border: 1px solid var(--border);
}
.btn-pill-secondary:hover{
border-color: var(--accent);
color: var(--text);
}
/* ---- Cards (industry cards, feature cards) ---- */
.card{
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: var(--panel-radius);
box-shadow: var(--panel-shadow);
}