/* ============================================================================ TEKUNA — canonical design tokens. SINGLE SOURCE OF TRUTH. Spec: docs/TEKUNA-DESIGN-SYSTEM.md Gate: anti-ai-design-slop skill. Linked from BOTH index.html (SPA shell) and public/landing.html (static homepage) so the two surfaces can never drift apart. Orel, 2026-08-09. Do not fork these values into a component. ========================================================================= */ /* ---- Self-hosted fonts. NOT fonts.googleapis.com — see spec §9: loading fonts from Google's CDN sends every visitor's IP to a US endpoint before consent is shown, and contradicts this site's own "servers in Israel" claim. SIL OFL (Frank Ruhl Libre, Assistant) / Apache-2.0 (JetBrains Mono), mirrored from the jsDelivr fontsource CDN, self-hosted here once. -------- */ @font-face { font-family:'Frank Ruhl Libre'; font-weight:400; font-style:normal; font-display:swap; src: url('/assets/fonts/FrankRuhlLibre-Regular-latin.woff2') format('woff2'); unicode-range: U+0000-024F,U+2000-206F; } @font-face { font-family:'Frank Ruhl Libre'; font-weight:500; font-style:normal; font-display:swap; src: url('/assets/fonts/FrankRuhlLibre-Medium-latin.woff2') format('woff2'); unicode-range: U+0000-024F,U+2000-206F; } @font-face { font-family:'Frank Ruhl Libre'; font-weight:700; font-style:normal; font-display:swap; src: url('/assets/fonts/FrankRuhlLibre-Bold-latin.woff2') format('woff2'); unicode-range: U+0000-024F,U+2000-206F; } @font-face { font-family:'Frank Ruhl Libre'; font-weight:900; font-style:normal; font-display:swap; src: url('/assets/fonts/FrankRuhlLibre-Black-latin.woff2') format('woff2'); unicode-range: U+0000-024F,U+2000-206F; } @font-face { font-family:'Frank Ruhl Libre'; font-weight:400; font-style:normal; font-display:swap; src: url('/assets/fonts/FrankRuhlLibre-Regular-hebrew.woff2') format('woff2'); unicode-range: U+0590-05FF,U+FB1D-FB4F; } @font-face { font-family:'Frank Ruhl Libre'; font-weight:500; font-style:normal; font-display:swap; src: url('/assets/fonts/FrankRuhlLibre-Medium-hebrew.woff2') format('woff2'); unicode-range: U+0590-05FF,U+FB1D-FB4F; } @font-face { font-family:'Frank Ruhl Libre'; font-weight:700; font-style:normal; font-display:swap; src: url('/assets/fonts/FrankRuhlLibre-Bold-hebrew.woff2') format('woff2'); unicode-range: U+0590-05FF,U+FB1D-FB4F; } @font-face { font-family:'Frank Ruhl Libre'; font-weight:900; font-style:normal; font-display:swap; src: url('/assets/fonts/FrankRuhlLibre-Black-hebrew.woff2') format('woff2'); unicode-range: U+0590-05FF,U+FB1D-FB4F; } @font-face { font-family:'Assistant'; font-weight:400; font-style:normal; font-display:swap; src: url('/assets/fonts/Assistant-Regular-latin.woff2') format('woff2'); unicode-range: U+0000-024F,U+2000-206F; } @font-face { font-family:'Assistant'; font-weight:500; font-style:normal; font-display:swap; src: url('/assets/fonts/Assistant-Medium-latin.woff2') format('woff2'); unicode-range: U+0000-024F,U+2000-206F; } @font-face { font-family:'Assistant'; font-weight:600; font-style:normal; font-display:swap; src: url('/assets/fonts/Assistant-SemiBold-latin.woff2') format('woff2'); unicode-range: U+0000-024F,U+2000-206F; } @font-face { font-family:'Assistant'; font-weight:700; font-style:normal; font-display:swap; src: url('/assets/fonts/Assistant-Bold-latin.woff2') format('woff2'); unicode-range: U+0000-024F,U+2000-206F; } @font-face { font-family:'Assistant'; font-weight:400; font-style:normal; font-display:swap; src: url('/assets/fonts/Assistant-Regular-hebrew.woff2') format('woff2'); unicode-range: U+0590-05FF,U+FB1D-FB4F; } @font-face { font-family:'Assistant'; font-weight:500; font-style:normal; font-display:swap; src: url('/assets/fonts/Assistant-Medium-hebrew.woff2') format('woff2'); unicode-range: U+0590-05FF,U+FB1D-FB4F; } @font-face { font-family:'Assistant'; font-weight:600; font-style:normal; font-display:swap; src: url('/assets/fonts/Assistant-SemiBold-hebrew.woff2') format('woff2'); unicode-range: U+0590-05FF,U+FB1D-FB4F; } @font-face { font-family:'Assistant'; font-weight:700; font-style:normal; font-display:swap; src: url('/assets/fonts/Assistant-Bold-hebrew.woff2') format('woff2'); unicode-range: U+0590-05FF,U+FB1D-FB4F; } @font-face { font-family:'JetBrains Mono'; font-weight:400; font-style:normal; font-display:swap; src: url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2'); } @font-face { font-family:'JetBrains Mono'; font-weight:500; font-style:normal; font-display:swap; src: url('/assets/fonts/JetBrainsMono-Medium.woff2') format('woff2'); } @font-face { font-family:'JetBrains Mono'; font-weight:600; font-style:normal; font-display:swap; src: url('/assets/fonts/JetBrainsMono-SemiBold.woff2') format('woff2'); } :root { /* --- Ground A · INK (the vault) --------------------------------------- Cold desaturated blue-black. Never #000 — pure black reads cheap and is the "near-black + one bright accent" look that flags AI-generated design. */ --tk-ink-950: oklch(0.13 0.016 258); --tk-ink-900: oklch(0.17 0.019 258); --tk-ink-800: oklch(0.22 0.021 258); --tk-ink-700: oklch(0.28 0.022 258); --tk-ink-600: oklch(0.36 0.020 258); /* --- Ground B · PAPER (the record) ------------------------------------ */ --tk-paper-50: oklch(0.975 0.006 92); --tk-paper-100: oklch(0.945 0.009 92); --tk-paper-200: oklch(0.900 0.012 92); /* --- Accent · BRASS (the instrument) ---------------------------------- Pulled off the yellow axis toward bronze so it stops reading as the generic "luxury gold". Replaces the old #c9a84c. */ --tk-brass-300: oklch(0.845 0.072 76); --tk-brass-500: oklch(0.700 0.106 71); --tk-brass-600: oklch(0.605 0.100 68); /* --- State · VERDIGRIS ------------------------------------------------- Brass that has been through time. ONLY for verified / settled / on-chain-final. If a surface is verdigris that is a factual claim about money, never a styling choice. */ --tk-verdigris-500: oklch(0.680 0.082 176); --tk-verdigris-200: oklch(0.880 0.045 176); /* --- Signal · functional only, never brand ---------------------------- */ --tk-warn: oklch(0.760 0.130 68); --tk-danger: oklch(0.560 0.150 27); /* --- Text ------------------------------------------------------------- */ --tk-text-on-ink: oklch(0.965 0.004 92); --tk-text-on-ink-muted: oklch(0.760 0.010 258); --tk-text-on-ink-faint: oklch(0.600 0.012 258); --tk-text-on-paper: oklch(0.220 0.012 258); /* --- Type ------------------------------------------------------------- Frank Ruhl Libre: the typeface of Israeli print since 1908. Assistant: Hebrew-native humanist sans (not a Latin face retrofitted). JetBrains Mono: ledger material — amounts, addresses, hashes. Heebo is BANNED (it is Roboto's Hebrew extension). */ --tk-font-display: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif; --tk-font-body: 'Assistant', system-ui, -apple-system, sans-serif; --tk-font-data: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; --tk-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --tk-text-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); --tk-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --tk-text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --tk-text-xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); --tk-text-2xl: clamp(2.25rem, 1.8rem + 2.2vw, 4rem); --tk-text-3xl: clamp(3rem, 2.2rem + 4vw, 6rem); --tk-tracking-eyebrow: 0.08em; --tk-leading-tight: 1.2; /* Latin display */ --tk-leading-he: 1.35; /* Hebrew display — no ascenders/descenders to breathe */ --tk-leading-body: 1.65; --tk-measure: 68ch; /* --- Elevation · light has a direction -------------------------------- Top rim-light + cast shadow. A dark surface cannot show a soft grey blur, so a single flat box-shadow on everything is both ugly and a tell. Maps to interactivity: 1 static, 2 interactive at rest, 3 hovered/open. */ --tk-elev-1: 0 1px 0 0 oklch(1 0 0 / .04) inset, 0 1px 2px oklch(0 0 0 / .40); --tk-elev-2: 0 1px 0 0 oklch(1 0 0 / .055) inset, 0 4px 12px -2px oklch(0 0 0 / .50); --tk-elev-3: 0 1px 0 0 oklch(1 0 0 / .07) inset, 0 12px 32px -8px oklch(0 0 0 / .60); --tk-elev-brass: 0 0 0 1px oklch(0.700 0.106 71 / .35), 0 8px 24px -6px oklch(0.700 0.106 71 / .25); /* --- Geometry --------------------------------------------------------- Restrained on purpose: uniform rounded-2xl everywhere is an AI tell, and so is a hard 0 on everything. Pills are for status chips only. */ --tk-radius-sm: 3px; --tk-radius-md: 6px; --tk-radius-lg: 10px; --tk-radius-pill: 999px; --tk-space-1: 4px; --tk-space-2: 8px; --tk-space-3: 12px; --tk-space-4: 16px; --tk-space-6: 24px; --tk-space-8: 32px; --tk-space-12: 48px; --tk-space-16: 64px; --tk-space-24: 96px; /* --- Motion ----------------------------------------------------------- */ --tk-ease: cubic-bezier(.2, .7, .3, 1); --tk-dur-fast: 120ms; --tk-dur-base: 220ms; --tk-dur-slow: 640ms; --tk-stagger: 60ms; } /* Hebrew display copy needs the looser leading. */ :root:lang(he) { --tk-leading-display: var(--tk-leading-he); } :root:lang(en) { --tk-leading-display: var(--tk-leading-tight); } /* Quality floor — not optional, not announced. */ *:focus-visible { outline: 2px solid var(--tk-brass-500); outline-offset: 2px; border-radius: var(--tk-radius-sm); } /* Numbers, addresses, hashes and code stay LTR even inside RTL text. */ [dir="rtl"] .tk-ltr, .tk-ltr { direction: ltr; unicode-bidi: isolate; } .tk-data { font-family: var(--tk-font-data); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }