/* ============================================================
JIFFYRESOURCES — DESIGN SYSTEM · TOKENS
------------------------------------------------------------
The foundation layer. Defines every design token as a CSS
custom property, the four brand themes, the density / type-
scale / motion modifiers, and the base reset.
Load this FIRST, before jiffy-components.css.
Fonts (add to ):
============================================================ */
:root {
/* ---- SURFACES (dark emerald base) -------------------------
--off body background (deepest)
--bg-2 secondary background / deep panels
--white card surface (named for legacy; renders DARK here)
--cream raised / accent surface
--surface-2 hover / active surface
*/
--off: #07140D;
--bg-2: #0B1F14;
--white: #0E2418;
--cream: #112C1E;
--cream-2: #14361F;
--surface-2: #112C1E;
/* ---- TEXT (highest → lowest contrast) -------------------- */
--ink: #F0EBD8; /* primary — warm off-white */
--ink-2: #E4DCC1;
--ink-soft: #B8B19A; /* secondary */
--mute: #7A7762; /* tertiary / labels / mono captions */
/* ---- BORDERS (gold-tinted, two strengths) ---------------- */
--line: rgba(232, 181, 60, 0.20);
--line-soft: rgba(232, 181, 60, 0.10);
--line-cool: rgba(200, 255, 200, 0.08);
/* ---- GOLD ACCENT (eyebrows, headings, index numbers, keys) */
--gold: #E8B53C;
--gold-deep: #C99318;
--gold-soft: rgba(232, 181, 60, 0.12);
--gold-glow: rgba(232, 181, 60, 0.25);
/* ---- LIME CTA (primary action, active state, "low regret") */
--lime: #B6F26E;
--lime-2: #8FE055;
--lime-deep: #6DC23E;
--lime-gradient: linear-gradient(135deg, #C8FF87 0%, #8DE65A 60%, #6FCB3A 100%);
--on-lime: #0A1B12; /* text that sits on lime/gold fills */
/* ---- STATUS ---------------------------------------------- */
--coral: #F08A6A; /* error / hazard / high-regret */
--coral-soft: rgba(240, 138, 106, 0.16);
--amber: #E8B53C; /* caution */
--emerald: #7BDC8C; /* success / passed audit */
--emerald-soft: rgba(123, 220, 140, 0.14);
/* ---- MODIFIER SCALARS (driven by html[data-*] below) ----- */
--density: 1;
--type-scale: 1;
/* ---- RADII ----------------------------------------------- */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 14px;
--r-lg: 22px;
--r-xl: 32px;
--r-pill: 999px;
/* ---- SHADOWS + GLOWS ------------------------------------- */
--shadow-1: 0 1px 0 rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.40);
--shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
--shadow-3: 0 32px 80px -28px rgba(0, 0, 0, 0.65), 0 8px 20px rgba(0, 0, 0, 0.45);
--glow-gold: 0 0 0 1px rgba(232, 181, 60, 0.45), 0 0 28px rgba(232, 181, 60, 0.22);
--glow-lime: 0 0 0 1px rgba(141, 230, 90, 0.55), 0 0 36px rgba(141, 230, 90, 0.32);
/* ---- EASINGS --------------------------------------------- */
--ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* ---- TYPE FAMILIES --------------------------------------- */
--font-display: 'Funnel Display', 'Archivo Black', 'Helvetica Neue', sans-serif;
--font-body: 'Funnel Sans', 'Geist', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
/* ---- SPACING SCALE (multiply by --density where rhythmic) - */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 120px;
}
/* ============================================================
THEMES — user-pickable brand variants.
Set on etc. Only the deltas from
the default (emerald) palette are overridden.
============================================================ */
/* Ocean — deep blue + silver + azure */
html[data-brand="ocean"] {
--off: #07172A;
--bg-2: #0B2244;
--white: #0E2A50;
--cream: #11315E;
--cream-2: #14396C;
--surface-2: #11315E;
--gold: #B9C5D8;
--gold-deep: #8A99B0;
--gold-soft: rgba(185, 197, 216, 0.14);
--gold-glow: rgba(185, 197, 216, 0.28);
--lime: #6FB0FF;
--lime-2: #4A98F7;
--lime-deep: #2D7FE3;
--lime-gradient: linear-gradient(135deg, #8FCFFF 0%, #5BA0F5 60%, #2D7FE3 100%);
--line: rgba(185, 197, 216, 0.20);
--line-soft: rgba(185, 197, 216, 0.10);
--glow-gold: 0 0 0 1px rgba(185, 197, 216, 0.45), 0 0 28px rgba(185, 197, 216, 0.20);
--glow-lime: 0 0 0 1px rgba(91, 160, 245, 0.55), 0 0 36px rgba(91, 160, 245, 0.30);
}
/* Sand — warm clay + terracotta + champagne */
html[data-brand="sand"] {
--off: #1F1812;
--bg-2: #2A1F18;
--white: #3C2D22;
--cream: #432F22;
--cream-2: #4E3729;
--surface-2: #43342A;
--ink: #F6EBD8;
--ink-2: #EBDDC1;
--gold: #E8B58C;
--gold-deep: #C68C5E;
--gold-soft: rgba(232, 181, 140, 0.16);
--lime: #F2D885;
--lime-2: #E8C56A;
--lime-deep: #C99B30;
--lime-gradient: linear-gradient(135deg, #FBE9A8 0%, #E8C56A 60%, #C99B30 100%);
--on-lime: #2A1F10;
--line: rgba(232, 181, 140, 0.22);
--line-soft: rgba(232, 181, 140, 0.10);
--glow-gold: 0 0 0 1px rgba(232, 181, 140, 0.45), 0 0 28px rgba(232, 181, 140, 0.20);
--glow-lime: 0 0 0 1px rgba(232, 197, 106, 0.55), 0 0 36px rgba(232, 197, 106, 0.30);
}
/* Forest — pine + copper + moss */
html[data-brand="forest"] {
--off: #0F1A11;
--bg-2: #16261A;
--white: #1B2E1F;
--cream: #213925;
--cream-2: #28432C;
--surface-2: #213925;
--gold: #D88B4F;
--gold-deep: #B26733;
--gold-soft: rgba(216, 139, 79, 0.14);
--lime: #A4D67B;
--lime-2: #84B85B;
--lime-deep: #5E9437;
--lime-gradient: linear-gradient(135deg, #C0E68C 0%, #84B85B 60%, #5E9437 100%);
--line: rgba(216, 139, 79, 0.20);
--line-soft: rgba(216, 139, 79, 0.10);
--glow-gold: 0 0 0 1px rgba(216, 139, 79, 0.45), 0 0 28px rgba(216, 139, 79, 0.20);
--glow-lime: 0 0 0 1px rgba(132, 184, 91, 0.55), 0 0 36px rgba(132, 184, 91, 0.30);
}
/* ============================================================
DENSITY — Compact / Cozy / Spacious.
Scales the --density multiplier applied to section rhythm.
============================================================ */
html[data-density="compact"] { --density: 0.75; }
html[data-density="cozy"] { --density: 1; }
html[data-density="spacious"] { --density: 1.25; }
/* ============================================================
TYPE SCALE — small / regular / large.
Bumps the root font-size so the whole rem-based scale shifts.
============================================================ */
html[data-type-scale="small"] { --type-scale: 0.92; font-size: calc(16px * var(--type-scale)); }
html[data-type-scale="regular"] { --type-scale: 1; font-size: 16px; }
html[data-type-scale="large"] { --type-scale: 1.10; font-size: calc(16px * var(--type-scale)); }
/* ============================================================
MOTION PREFERENCE — full / subtle / off.
Always also honour the OS prefers-reduced-motion setting.
============================================================ */
html[data-motion="subtle"] *, html[data-motion="subtle"] *::before, html[data-motion="subtle"] *::after {
animation-duration: 0.001ms !important;
transition-duration: 200ms !important;
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
html[data-motion="off"] .marquee-track { animation: none; }
html[data-motion="off"] .cursor { display: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.cursor { display: none; }
}
/* ============================================================
BASE RESET
============================================================ */
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--off);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
font-feature-settings: 'ss01', 'cv11';
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--gold); color: var(--ink); }
*:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }