/* * NativeKloud Design Tokens — THE canonical brand contract. * * Source of truth for every NativeKloud property: nativekloud.com, * NativeKloud Inference dashboard and product pages, future products. * * Contract rules: * - This file defines tokens (custom properties) and type stacks ONLY. * Components live in each consumer, built FROM these tokens. * - Consumers in other repos VENDOR a copy of this file and record the * source commit in a comment at the top of their copy. Never hot-link * across sites; never fork values silently. * - Change the brand here first; consumers re-vendor. One file, one brand. * - Sovereignty: system/self-hosted fonts only. No Google Fonts, no US CDN, * ever, on any NativeKloud property. * * Theming mechanics (all three must be honored by consumers): * - Dark is the default identity. * - Light activates via prefers-color-scheme unless data-theme='dark' pins dark. * - data-theme='light' | 'dark' on overrides the OS in either direction. */ :root { /* -- color: dark (default identity) -- */ --bg: #000; --fg: #fff; --muted: #8a8a8a; --body: #d4d4d4; --line: #1a1a1a; --panel: #000; --panel-hover: #0a0a0a; --accent: #c8ff00; /* fills, dots, rules — always the brand lime */ --accent-ink: #c8ff00; /* accent used as *text*, must stay readable */ --on-accent: #000; --glow: 0 0 12px var(--accent); --grain-blend: overlay; --grain-opacity: 0.08; --nav-bg: rgba(0,0,0,0.6); --ghost-border: #333; /* -- type -- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --font-weight-body: 300; /* light body weight is part of the identity */ --font-weight-strong: 500; --font-weight-logo: 900; /* -- layout -- */ --container-max: 1280px; --container-pad: 32px; --radius: 0; /* the brand is sharp-edged; radius is 0 by design */ --transition: 0.2s ease; } /* Light-theme accent is a DARKER lime (2026-08-05): raw #c8ff00 fills wash out on the light ground — the glow-dot and button edges all but vanish. #a8d600 keeps the hue, survives on #fbfbf7, and black-on-lime button text stays >10:1. The glow outline steps one shade darker again so it still reads as an edge, not a halo. */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { --bg: #fbfbf7; --fg: #0a0a0a; --muted: #6b6b66; --body: #33332e; --line: #e4e4dc; --panel: #fff; --panel-hover: #f6f6ef; --accent: #a8d600; --accent-ink: #4a6300; --on-accent: #000; --glow: 0 0 0 1px #86ac00; --grain-blend: multiply; --grain-opacity: 0.05; --nav-bg: rgba(251,251,247,0.72); --ghost-border: #c9c9bf; } } :root[data-theme='light'] { --bg: #fbfbf7; --fg: #0a0a0a; --muted: #6b6b66; --body: #33332e; --line: #e4e4dc; --panel: #fff; --panel-hover: #f6f6ef; --accent: #a8d600; --accent-ink: #4a6300; --on-accent: #000; --glow: 0 0 0 1px #86ac00; --grain-blend: multiply; --grain-opacity: 0.05; --nav-bg: rgba(251,251,247,0.72); --ghost-border: #c9c9bf; } /* -- destructive actions (added 2026-08-05: the Inference dashboard revokes keys and deletes accounts; consumers were hand-rolling these — now canonical) -- */ :root { --danger: #ff6f61; --danger-ink: #ff6f61; --danger-tint: rgba(255, 111, 97, 0.12); } @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { --danger: #a8231a; --danger-ink: #a8231a; --danger-tint: rgba(168, 35, 26, 0.08); } } :root[data-theme='light'] { --danger: #a8231a; --danger-ink: #a8231a; --danger-tint: rgba(168, 35, 26, 0.08); }