/* NAI v2 - tokens: kleur, type, ruimte, radii, motion. Elke waarde die meer dan een keer voorkomt hoort hier, nergens anders. */ /* ============================================================================ NAI design system ---------------------------------------------------------------------------- One accent colour, a lot of whitespace, and motion only where it tells you something. Green and red are reserved for money and health - they are never decoration, so a red number always means a red number. Light is the default and dark is a token swap, so every colour is defined once on :root and only re-declared where dark genuinely differs. ========================================================================= */ :root { /* Surfaces */ --bg: #ffffff; --bg-soft: #fbfbfc; --surface: #ffffff; --surface-2: #f7f7f8; --surface-3: #f1f1f3; --border: #e8e8ec; --border-strong: #d8d8de; /* Text */ --text: #09090b; --text-2: #6c6c76; --text-3: #9a9aa4; /* One accent, used for focus, links and the live pulse. OKLCH with the hue as its own variable is what makes a per-user accent cheap: the server writes --hue on , and every shade below follows from it. 274 is the indigo v1 shipped with, so an account that has never picked a colour looks exactly as it did. Lightness and chroma stay fixed across hues, which is the point of OKLCH - the same numbers read as the same weight whether the user picks blue, green or pink. */ --hue: 274; --accent: oklch(0.55 0.19 var(--hue)); --accent-hover: oklch(0.49 0.19 var(--hue)); --accent-soft: oklch(0.96 0.03 var(--hue)); --accent-border: oklch(0.90 0.06 var(--hue)); --on-accent: oklch(0.99 0 0); /* Semantic - money and health only */ --good: #15803d; --good-soft: #eaf6ee; --good-border: #bfe3cc; --bad: #c62828; --bad-soft: #fdeded; --bad-border: #f5c6c6; --amber: #a35b06; --amber-soft: #fdf3e4; --amber-border:#f0d7ab; /* Depth: soft, layered, never a hard drop shadow */ --shadow-xs: 0 1px 2px rgba(16, 18, 27, .04); --shadow-sm: 0 1px 2px rgba(16, 18, 27, .04), 0 2px 6px rgba(16, 18, 27, .04); --shadow-md: 0 2px 4px rgba(16, 18, 27, .04), 0 8px 24px rgba(16, 18, 27, .06); --shadow-lg: 0 4px 8px rgba(16, 18, 27, .05), 0 24px 56px rgba(16, 18, 27, .12); --ring: 0 0 0 3px var(--accent-soft); /* Radii */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px; --font: "Inter", "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --mono: "JetBrains Mono", "SF Mono", "Cascadia Code", "Consolas", ui-monospace, monospace; --maxw: 1180px; --nav-h: 60px; } /* De licht/donker-varianten leven nu in de packs (css/themes/). Twee systemen die dezelfde tokens herschrijven betekende dat lichte modus altijd verloor van het pack, omdat packs later in de cascade laden. Eén systeem, geen verrassingen: het pack IS het thema. Wat hierboven op :root staat is de lichte basis; midnight.css maakt hem donker en is de standaard, dus zwart blijft zwart. */ /* ---------------------------------------------------------------------------- Motion scale ---------------------------------------------------------------------------- Duur en easing staan hier en nergens anders, zodat de hele interface in hetzelfde tempo beweegt in plaats van in het getal dat die dag toevallig getypt werd. Nodig je een nieuwe, voeg een token toe - geen literal. --ease-out is een echte veer via linear(), zonder JS-bibliotheek. Gebruik hem voor alles wat AANKOMT: kaarten, popovers, toasts. ------------------------------------------------------------------------- */ :root { --ease-out: linear(0, 0.22 6%, 0.6 14%, 0.87 24%, 1.01 36%, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-in: cubic-bezier(.7, 0, .84, 0); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* v1 gebruikte --ease als losse naam; blijft staan zodat oude regels werken */ --ease: var(--ease-out); --t-tap: 90ms; --t-fast: 160ms; --t-mid: 260ms; --t-slow: 340ms; --t-page: 420ms; /* Een waarde die veranderde flitst een keer zijn richting, en dooft dan. Kleur draagt de betekenis, dus het leest ook met motion uit. */ --flash-up: color-mix(in oklch, var(--good) 22%, transparent); --flash-down: color-mix(in oklch, var(--bad) 22%, transparent); /* Ruimte */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; } @media (prefers-reduced-motion: reduce) { :root { --t-tap: 0ms; --t-fast: 0ms; --t-mid: 0ms; --t-slow: 0ms; --t-page: 0ms; } } /* Lange tabellen betalen alleen layout voor de rijen die in beeld staan. */ .table-wrap, .feed, .positions, .console-body, .signal-list { content-visibility: auto; contain-intrinsic-size: auto 600px; }