/* ============================================================
DECISIVE — Colors + Type (Semantic layer)
------------------------------------------------------------
Re-exports the raw tokens from tokens.css and adds semantic
aliases (fg1, bg1, h1, body, code) so designs can use
meaning-named variables instead of color names.
Usage:
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rokkitt:wght@400;500;700;800&display=swap');
:root {
/* ── Raw palette (mirrors tokens.css for self-containment) ── */
--green: #1F3F2A;
--green-deep: #16301F;
--green-ink: #0F2416;
--green-tint: #2A4D36;
--brass: #836B3F;
--brass-soft: #A48A5C;
--brass-deep: #5E4B2A;
--walnut: #533A1C;
--walnut-soft: #7A593A;
--cranberry: #8B2E3B;
--cranberry-soft: #A84854;
--ink-brown: #1A1410;
--paper: #FBF8EE;
--paper-2: #FBF8EE;
--paper-3: #FBF8EE;
--rule: rgba(26, 20, 16, .14);
--rule-on-green: rgba(251, 248, 238, .18);
/* ── Semantic background tokens ─────────────────────────── */
/* Decisive is a dark-first system. bg1 is the dominant surface. */
--bg1: var(--green); /* primary surface — full bleeds, app chrome */
--bg2: var(--green-deep); /* depth on green — dividers, footers */
--bg3: var(--green-ink); /* deepest green — shadows, behind cards */
/* Inverse / data surfaces — when you need ivory */
--surface-1: var(--paper); /* ivory cards, where verified data lives */
--surface-2: var(--paper-2); /* second ivory tone */
--surface-3: var(--paper-3); /* card edges, dividers on ivory */
/* ── Semantic foreground tokens ─────────────────────────── */
/* On bg1 (forest) — */
--fg1: var(--paper); /* primary text on green */
--fg2: rgba(251, 248, 238, .75); /* secondary text on green (eyebrows, meta) */
--fg3: rgba(251, 248, 238, .55); /* tertiary on green (timestamps) */
--fg-accent: var(--brass-soft); /* brass on green needs the soft variant for AAA */
/* On surface-1 (ivory) — */
--ink: var(--ink-brown); /* primary text on ivory */
--ink-2: #6b6357; /* secondary text on ivory (meta) */
--ink-3: #8a8276; /* tertiary text on ivory */
--ink-accent: var(--walnut); /* supporting headlines on ivory */
--ink-total: var(--green); /* the verified total, on ivory */
/* The ONE accent — the verified mark. Use sparingly. */
--accent: var(--brass);
--accent-soft: var(--brass-soft);
/* ── MONETARY RULE ──────────────────────────────────────────
A dollar amount is ONE color, end to end. The "$" glyph and
the digits never split. Apply --money-total to the verified
weekly total (brass). Apply --money to every other amount —
it inherits the surrounding ink color so the figure reads
as a single tonal unit. Never wrap "$" or any digit run in
a span with its own color. */
--money: currentColor; /* the default — inherits ink/paper */
--money-total: var(--brass); /* reserved for the verified total */
/* ── Hairlines ──────────────────────────────────────────── */
--hairline: var(--rule);
--hairline-on-bg1: var(--rule-on-green);
/* ── Type families ──────────────────────────────────────── */
--ff-display: 'Rokkitt', Rockwell, 'Roboto Slab', Georgia, serif;
--ff-body: 'Courier New', 'Source Code Pro', Courier, monospace;
--ff-mono: 'Courier New', 'Source Code Pro', Courier, monospace; /* same as body — Decisive only ships two faces */
/* ── Display scale (Rokkitt 700) ────────────────────────── */
--fs-display-xl: 64px;
--fs-display-lg: 48px;
--fs-display-md: 32px;
--fs-display-sm: 24px;
/* ── Body scale (Courier New) ───────────────────────────── */
--fs-body-lg: 18px;
--fs-body: 16px;
--fs-body-sm: 14px;
--fs-meta: 11px;
/* Line heights */
--lh-display: 1.15;
--lh-body: 1.55;
--lh-tight: 1.05;
/* Letter-spacing */
--ls-meta: .22em;
--ls-body: .02em;
--ls-display: .005em;
/* ── Spacing (kept identical to tokens.css) ─────────────── */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 80px;
/* ── Radii ──────────────────────────────────────────────── */
/* Decisive uses near-zero radii — this is a ledger, not a SaaS app. */
--radius-0: 0;
--radius-1: 1px;
--radius-2: 2px; /* default — cards, buttons, stamps */
--radius-pill: 999px; /* the brass dot, only */
/* ── Elevation ──────────────────────────────────────────── */
/* One shadow. Long, low, warm. Never a glow. */
--shadow-paper: 0 1px 0 var(--rule), 0 24px 48px -24px rgba(26, 20, 16, .18);
--shadow-none: none;
}
/* ============================================================
SEMANTIC ELEMENT STYLES
These set defaults so plain HTML reads correctly in the system.
============================================================ */
html, body {
margin: 0;
background: var(--bg1);
color: var(--fg1);
font-family: var(--ff-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
letter-spacing: var(--ls-body);
}
/* RULE: italics are not used in the Decisive system. Ever. */
*, *::before, *::after { font-style: normal !important; }
/* Headings — Rokkitt 700, never italic, tight line-height. */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ff-display);
font-weight: 700;
letter-spacing: var(--ls-display);
line-height: var(--lh-display);
margin: 0;
}
h1 { font-size: var(--fs-display-xl); } /* cover headline */
h2 { font-size: var(--fs-display-lg); } /* section opener */
h3 { font-size: var(--fs-display-md); } /* subhead */
h4 { font-size: var(--fs-display-sm); } /* card headline */
h5 { font-size: var(--fs-body-lg); }
h6 { font-size: var(--fs-body); }
/* Body */
p {
margin: 0 0 var(--sp-4) 0;
font-family: var(--ff-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
/* Code / data — same family, but treat as data-bearing */
code, kbd, pre, samp {
font-family: var(--ff-body);
font-size: var(--fs-body);
letter-spacing: var(--ls-body);
}
/* Small / meta — for eyebrows, dates, footers */
small {
font-size: var(--fs-meta);
letter-spacing: var(--ls-meta);
text-transform: uppercase;
opacity: .75;
}
/* Links — underline, no color shift on hover (use opacity) */
a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
a:hover { opacity: .7; }
/* Horizontal rule — the brass mark, thin */
hr {
border: 0;
height: 2px;
background: var(--accent);
width: 64px;
margin: var(--sp-5) 0;
}
/* Lists — ledger style on ivory */
ul, ol { padding-left: var(--sp-5); margin: 0 0 var(--sp-4); }
li { margin: var(--sp-1) 0; }
/* ============================================================
UTILITY CLASSES
============================================================ */
.ff-display { font-family: var(--ff-display); letter-spacing: var(--ls-display); }
.ff-body { font-family: var(--ff-body); letter-spacing: var(--ls-body); }
.ff-mono { font-family: var(--ff-mono); letter-spacing: var(--ls-body); }
/* Eyebrow — small uppercase meta label */
.eyebrow {
font-family: var(--ff-body);
font-size: var(--fs-meta);
letter-spacing: var(--ls-meta);
text-transform: uppercase;
color: var(--fg1);
opacity: .75;
}
.eyebrow--ink { color: var(--ink-2); opacity: 1; }
/* The verified stamp — use only on the total */
.stamp {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1.5px solid var(--green);
color: var(--green);
padding: 4px 10px;
border-radius: var(--radius-2);
font-family: var(--ff-body);
font-size: 10px;
letter-spacing: var(--ls-meta);
text-transform: uppercase;
}
.stamp.on-green { border-color: var(--brass-soft); color: var(--brass-soft); }
.stamp .dot { width: 6px; height: 6px; background: var(--brass); border-radius: 50%; }