/* ========================================================================== Human Syntax — Design Tokens v1.0 · 2026 · skåne ========================================================================== */ :root { /* ---------- Cool neutral scale (Human Syntax base) ---------- */ --hs-50: #F2F4F7; --hs-100: #E5E8EE; --hs-200: #CBD1DB; --hs-300: #A6AEBC; --hs-400: #7B8493; --hs-500: #545C6B; --hs-600: #3B424E; --hs-700: #262B34; --hs-800: #171B22; --hs-900: #0F1217; --hs-950: #0B0D10; /* ---------- Vepino ---------- */ --vepino-50:#FFF1E8;--vepino-100:#FFDFC9;--vepino-200:#FFBE94;--vepino-300:#FF9D5F; --vepino-400:#FF822F;--vepino-500:#FF6A1F;--vepino-600:#E2530E;--vepino-700:#B33F09; --vepino-800:#842D06;--vepino-900:#571D04;--vepino-950:#2E0F02; /* ---------- Pembon ---------- */ --pembon-50:#F4FCDA;--pembon-100:#E7FAB0;--pembon-200:#D4F578;--pembon-300:#C2EE48; --pembon-400:#B6E627;--pembon-500:#A8D80F;--pembon-600:#87B007;--pembon-700:#678705; --pembon-800:#4A6004;--pembon-900:#2F3D02;--pembon-950:#1A2101; /* ---------- Loost ---------- */ --loost-50:#FFFCDB;--loost-100:#FEF7AE;--loost-200:#FCEE6E;--loost-300:#F9E430; --loost-400:#F5D90A;--loost-500:#D6BD03;--loost-600:#A89400;--loost-700:#7B6C00; --loost-800:#524800;--loost-900:#332C00;--loost-950:#1B1700; /* ---------- Secondary chord (visible IDE token colors) ---------- */ --chord-comment: #8A92A0; /* AA on dark bg */ --chord-string: #9FBEFF; --chord-keyword: #C8A0FF; --chord-error: #FF6B7B; /* ---------- Type (overridable via tweaks) ---------- */ --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --text: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --hand: "Caveat", "Caveat Brush", cursive; --display-tracking: -0.04em; --display-weight: 600; /* ---------- Radii ---------- */ --r-0: 0px; --r-1: 2px; --r-2: 4px; --r-3: 6px; --r-4: 10px; --keyline: 1px solid var(--line); --keyline-soft: 1px solid var(--line-soft); /* ---------- Semantic (DARK default) ---------- */ --bg: var(--hs-950); --bg-raise: var(--hs-900); --bg-card: var(--hs-800); --line: #2A2F3A; --line-soft: #1B2028; --fg: var(--hs-50); --fg-mute: #C7CEDB; /* ~12.4:1 on bg */ --fg-soft: #98A0AF; /* ~7.1:1 on bg */ --fg-faint: #7E8693; /* ~5.2:1 on bg — small text minimum */ --comment: #8A92A0; /* legible IDE comment, ~6:1 */ --dot: #232833; --selection-bg: var(--vepino-500); --selection-fg: var(--hs-950); } /* ========================================================================== Dark surface variants — toggle via [data-dark] on . These override only --bg/--bg-raise/--bg-card/--line/--line-soft/--dot, so neutrals + tokens stay AA across all four. ========================================================================== */ /* primer — clean near-black, lifted from #0B0D10 */ html[data-theme="dark"][data-dark="primer"] { --bg: #16191F; --bg-raise: #1C2027; --bg-card: #242932; --line: #353B47; --line-soft: #262C36; --dot: #2C323D; } /* deep — default, balanced mid-dark, was #0E1116 */ html[data-theme="dark"][data-dark="deep"], html[data-theme="dark"]:not([data-dark]) { --bg: #1B1E25; --bg-raise: #232730; --bg-card: #2C313B; --line: #3C424F; --line-soft: #2D323D; --dot: #343A46; } /* tokyo — Tokyo Night blue-violet, was #1A1B26 */ html[data-theme="dark"][data-dark="tokyo"] { --bg: #232539; --bg-raise: #2B2D44; --bg-card: #34374F; --line: #45485F; --line-soft: #363852; --dot: #3B3E58; } /* slate-soft — most spacious, lite mjukare, was #161A22 */ html[data-theme="dark"][data-dark="slate-soft"] { --bg: #20242E; --bg-raise: #282D38; --bg-card: #313643; --line: #424754; --line-soft: #313644; --dot: #393E4B; } [data-theme="light"] { --bg: #F2F4F7; --bg-raise: #E9ECF2; --bg-card: #FFFFFF; --line: #C2C9D4; --line-soft: #DCE0E8; --fg: #0B0D10; --fg-mute: #2A303A; /* ~13:1 */ --fg-soft: #444B58; /* ~8.4:1 */ --fg-faint: #5A6271; /* ~5.8:1 — AA small */ --comment: #5A6271; --dot: #B8C0CC; --selection-bg: #B33F09; --selection-fg: #ffffff; } /* ---------- Base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--text); font-feature-settings: "ss01", "cv11", "cv05", "cv02"; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background 0.18s ease, color 0.18s ease; } ::selection { background: var(--selection-bg); color: var(--selection-fg); } .dot-grid { background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px); background-size: 24px 24px; } .mono { font-family: var(--mono); font-feature-settings: "zero", "ss02"; font-weight: 500; } .comment { color: var(--comment); font-family: var(--mono); } .comment::before { content: "// "; } .tok { padding: 0.08em 0.28em; border-radius: 2px; font-weight: 500; } /* Dark theme: use 300–400 levels so chip text passes AA on bg */ .tok-vepino { background: color-mix(in oklab, var(--vepino-500) 22%, transparent); color: var(--vepino-300); } .tok-pembon { background: color-mix(in oklab, var(--pembon-500) 22%, transparent); color: var(--pembon-300); } .tok-loost { background: color-mix(in oklab, var(--loost-400) 28%, transparent); color: var(--loost-300); } [data-theme="light"] .tok-vepino { background: color-mix(in oklab, var(--vepino-500) 18%, transparent); color: var(--vepino-800); } [data-theme="light"] .tok-pembon { background: color-mix(in oklab, var(--pembon-500) 22%, transparent); color: var(--pembon-900); } [data-theme="light"] .tok-loost { background: color-mix(in oklab, var(--loost-400) 30%, transparent); color: var(--loost-900); } .bracket { color: var(--fg-soft); font-family: var(--mono); font-weight: 500; } /* When tweaks override fonts these classes win */ .display { font-family: var(--display); letter-spacing: var(--display-tracking); font-weight: var(--display-weight); } /* ========================================================================== Tone-aware text colors — service display names need different shades per theme to clear AA. Components stamp data-tone="vepino|pembon|loost" on a wrapper; CSS picks the right shade. ========================================================================== */ /* DARK theme — saturated 400-level, plenty of contrast on #0B0D10 */ [data-tone="vepino"] .svc-name, [data-tone="vepino"] .wm-name, [data-tone="vepino"] .lp-tool-name-text, [data-tone="vepino"] .fp-hero-name-text { color: var(--vepino-400); } [data-tone="pembon"] .svc-name, [data-tone="pembon"] .wm-name, [data-tone="pembon"] .lp-tool-name-text, [data-tone="pembon"] .fp-hero-name-text { color: var(--pembon-400); } [data-tone="loost"] .svc-name, [data-tone="loost"] .wm-name, [data-tone="loost"] .lp-tool-name-text, [data-tone="loost"] .fp-hero-name-text { color: var(--loost-400); } /* LIGHT theme — drop to deep shade so big display text passes AA on #F2F4F7 */ [data-theme="light"] [data-tone="vepino"] .svc-name, [data-theme="light"] [data-tone="vepino"] .wm-name, [data-theme="light"] [data-tone="vepino"] .lp-tool-name-text, [data-theme="light"] [data-tone="vepino"] .fp-hero-name-text { color: var(--vepino-700); } [data-theme="light"] [data-tone="pembon"] .svc-name, [data-theme="light"] [data-tone="pembon"] .wm-name, [data-theme="light"] [data-tone="pembon"] .lp-tool-name-text, [data-theme="light"] [data-tone="pembon"] .fp-hero-name-text { color: var(--pembon-800); } [data-theme="light"] [data-tone="loost"] .svc-name, [data-theme="light"] [data-tone="loost"] .wm-name, [data-theme="light"] [data-tone="loost"] .lp-tool-name-text, [data-theme="light"] [data-tone="loost"] .fp-hero-name-text { color: var(--loost-800); } /* LIGHT theme — tone-tinted hero backgrounds so each box reads as a service. Subtle wash, lets large display text in deep shade still pass AA. */ [data-theme="light"] .hero-svc[data-tone="vepino"] { background: var(--vepino-50); } [data-theme="light"] .hero-svc[data-tone="pembon"] { background: var(--pembon-50); } [data-theme="light"] .hero-svc[data-tone="loost"] { background: var(--loost-50); } /* Cursor-blink — vepino accent. On dark use 400; on light use 700. */ .cursor-blink { color: var(--vepino-400); } [data-theme="light"] .cursor-blink { color: var(--vepino-700); } /* Service-name in mono badges (e.g. type:service in hero footer) */ [data-tone="vepino"] .svc-name-mono { color: var(--vepino-400); } [data-tone="pembon"] .svc-name-mono { color: var(--pembon-400); } [data-tone="loost"] .svc-name-mono { color: var(--loost-400); } [data-theme="light"] [data-tone="vepino"] .svc-name-mono { color: var(--vepino-700); } [data-theme="light"] [data-tone="pembon"] .svc-name-mono { color: var(--pembon-800); } [data-theme="light"] [data-tone="loost"] .svc-name-mono { color: var(--loost-800); }