/* ============================================================
EVIDENCE - FULL ELEVATE - resolved design tokens
The Elevate recipe with every aspect ON, flattened to final
values (no toggles, no baseline). Import this in any artifact.
Type: Satoshi (self-hosted, display/headings) + Inter (Google
Fonts in the page , body/UI/data).
============================================================ */
/* ---- Satoshi (self-hosted, headings/display) ---- */
@font-face{font-family:"Satoshi";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Satoshi-Regular.otf") format("opentype");}
@font-face{font-family:"Satoshi";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/Satoshi-Medium.otf") format("opentype");}
@font-face{font-family:"Satoshi";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/Satoshi-Bold.otf") format("opentype");}
:root{
/* ---------- type families ---------- */
--font-display:"Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif; /* headings, big numbers */
--font-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* body, UI, data */
--font-mono:"SF Mono","Fira Code","Fira Mono", ui-monospace, monospace;
/* ---------- core greens ---------- */
--lime:#4ADE80; /* Bright Lime - sole accent, fills */
--forest:#002E11; /* Dark lime - inverted/signature surface, companion text on Lime green */
--lime-300:#86EFAC; /* Lime green - feature surface (heroband / secondary button) */
--lime-100:#DCFCE7; /* soft tint / badge surface */
--green-700:#15803D; /* dark-green accent on light (labels) */
--green-900:#14532D; /* hover step / hairline on dark */
/* ---------- neutral ramp = SLATE (the ONLY neutral; never plain gray) ----------
Every neutral - text, lines, fills, chrome, controls - comes from here.
Slate is cool (a hint of blue); generic gray is off-brand. */
--slate-50:#F8FAFC; --slate-100:#F1F5F9; --slate-200:#E2E8F0; --slate-300:#CBD5E1;
--slate-400:#94A3B8; --slate-500:#64748B; --slate-600:#475569; --slate-700:#334155;
--slate-800:#1E293B; --slate-900:#0F172A; --slate-950:#020617;
/* ---------- surfaces & text ---------- */
--canvas:#FFFFFF; /* page background */
--surface:#FFFFFF; /* cards */
--surface-alt:#86EFAC; /* feature surface (lime-300) */
--surface-dark:#002E11; /* inverted / signature surfaces (forest) */
--fill-1:#F8FAFC; /* slate-50: borderless container fill */
--fill-2:#F1F5F9; /* slate-100: input fill, neutral hover */
--hairline:#E2E8F0; /* slate-200: tables only */
--ink:#0F172A; /* ALL text on light surfaces (slate-900) */
--on-dark:#FFFFFF; /* body text on dark surfaces (pure white) */
/* ---------- semantic (bright surface + dark-companion text) ---------- */
--success:#4ADE80; --success-ink:#002E11; /* Lime green / Dark lime */
--warning:#FAE580; --warning-ink:#4B3E00; /* Lemon yellow / Dark lemon */
--error:#FCA5A5; --error-ink:#7F1D1D; /* Cherry red / Dark cherry */
/* ---------- secondary palette ยท every bright has its dark companion ----------
Each fruit carries its colour-spectrum name; its dark companion is "Dark ".
Lime green / Dark lime = --lime-300 / --forest (defined above). */
--lemon: #FAE580; --lemon-companion: #4B3E00; /* Lemon yellow / Dark lemon */
--tangerine: #FFCE8F; --tangerine-companion: #7C2D12; /* Tangerine orange / Dark tangerine (burnt orange) */
--grapefruit: #FCA5A5; --grapefruit-companion:#7F1D1D; /* Cherry red / Dark cherry - pink/magenta retired
(cyber buyers discount pink); var name kept for plumbing */
--blueberry: #C2E9FF; --blueberry-companion: #053550; /* Blueberry blue / Dark blueberry */
--ember: #F4733A; /* the FIRE dots' hot core - custom palettes derive it from the tangerine pair */
/* ---------- radius ---------- */
--radius-card:24px; /* cards, buttons */
--radius-input:12px; /* small card / input */
--radius-pill:9999px; /* badges, pills */
/* ---------- spacing (4px-based, airy) ---------- */
--space-xs:12px; --space-sm:24px; --space-md:40px; --space-lg:64px; --space-xl:96px; --space-2xl:128px;
/* ---------- weights ---------- */
--w-regular:400; --w-medium:500; --w-bold:700;
/* ---------- motion (subtle + powerful; silky ease-out, no overshoot) ----------
Two primitives: sequential slide-up reveal, and number count-up. Same easing. */
--ease-silk:cubic-bezier(.16,1,.3,1); /* decisive settle, never bounces */
--dur-reveal:500ms; /* one object's fade+rise */
--reveal-rise:20px; /* how far an object travels up as it fades in */
--stagger:90ms; /* delay between sequential objects */
--dur-count:1200ms; /* number ramp / count-up */
/* no shadows: surfaces separate by fill / contrast, never elevation */
--shadow:none;
}