/* ============================================================ EVIDENCE - CORE BRAND TOKENS The invariants shared by every Evidence surface: color, typeface, weights, the 8px spacing grid, motion ceilings. ------------------------------------------------------------ This file is the SINGLE SOURCE OF TRUTH for brand foundations. It carries NO structural personality (no radius, no shadow, no max-width) - those belong to each system: · product/product.css - strict Swiss (radius 0, no shadow) · website/website.css - expressive (radius, fills, shadow) Edit a value here once; it propagates to every system live. ------------------------------------------------------------ TYPE: Satoshi (self-hosted below, headings/display) + Inter (loaded via to Google Fonts in each page , for body / UI / all tabular data). Mono falls back to the platform stack. ============================================================ */ /* ---- Satoshi (self-hosted · headings / display) ---- */ @font-face { font-family:"Satoshi"; font-style:normal; font-weight:300; font-display:swap; src:url("fonts/Satoshi-Light.otf") format("opentype"); } @font-face { font-family:"Satoshi"; font-style:italic; font-weight:300; font-display:swap; src:url("fonts/Satoshi-LightItalic.otf") format("opentype"); } @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:italic; font-weight:400; font-display:swap; src:url("fonts/Satoshi-NormalItalic.otf") format("opentype"), url("fonts/Satoshi-Italic.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:italic; font-weight:500; font-display:swap; src:url("fonts/Satoshi-MediumItalic.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"); } @font-face { font-family:"Satoshi"; font-style:italic; font-weight:700; font-display:swap; src:url("fonts/Satoshi-BoldItalic.otf") format("opentype"); } :root { /* ---------- NEUTRALS · 8-step gray ramp ---------- */ --black: #111111; --gray-700: #333333; --gray-500: #666666; --gray-400: #888888; --gray-300: #AAAAAA; --gray-200: #D4D4D4; --gray-100: #EEEEEE; --gray-50: #F7F7F7; --white: #FFFFFF; /* ---------- ACCENTS · saturated value + low-alpha surface ---------- */ --blue: #3061FF; --blue-light: rgba(48, 97, 255, 0.08); --green: #3CB371; --green-light: rgba(60, 179, 113, 0.10); --pink: #F374AE; --pink-light: rgba(243, 116, 174, 0.10); --orange: #FCA83A; --orange-light: rgba(252, 168, 58, 0.10); --purple: #7467E8; --purple-light: rgba(116, 103, 232, 0.10); --red: #E5484D; --red-light: rgba(229, 72, 77, 0.08); /* darker readable variants for text on light surfaces */ --orange-dark: #B47A18; --pink-dark: #C2185B; /* ---------- SEMANTIC ALIASES ---------- */ --fg-1: var(--black); /* primary text */ --fg-2: var(--gray-700); /* body text */ --fg-3: var(--gray-500); /* secondary / captions */ --fg-4: var(--gray-400); /* disabled / footnotes */ --bg-1: var(--white); /* base surface */ --bg-2: var(--gray-50); /* alt section / subtle fill */ --border: var(--gray-100); /* default hairline */ --border-strong: var(--gray-200); /* emphasized / inputs */ --accent: var(--blue); /* primary accent */ --accent-light: var(--blue-light); /* status aliases */ --ok: var(--green); --warn: var(--orange); --crit: var(--red); /* ---------- TYPE ---------- */ /* Satoshi (self-hosted) = headings/display · Inter = body, UI & all data */ --font-display: "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "Fira Code", "Fira Mono", ui-monospace, monospace; --font-sans: var(--font-body); /* default text family */ --font: var(--font-body); /* legacy alias */ --mono: var(--font-mono); /* legacy alias */ /* weights */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-bold: 700; /* ---------- SPACING · 8px Swiss grid, six tokens ---------- */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 48px; --space-xl: 80px; --space-2xl: 120px; /* ---------- MOTION · restrained, brand-wide defaults ---------- */ --ease: ease; --ease-out: ease-out; --dur: 180ms; --dur-slow: 250ms; /* hard ceiling */ }