/* ============================================================================ Kylth — design tokens Single source of truth for colour, spacing, radii, shadows, typography and motion. Nothing in app.css should hard-code a raw value that belongs here. ========================================================================= */ :root { /* ---- surfaces (near-black base, progressively lighter layers) -------- */ --c-bg: #0a0b0d; /* app canvas */ --c-surface: #101216; /* sidebar / topbar */ --c-surface-2: #14171c; /* cards */ --c-surface-3: #1a1e25; /* raised: menus, modals, hover fills */ --c-surface-inset: #0c0e11; /* inputs, code blocks, wells */ /* one step up / one step down from --c-surface-3, for control states */ --c-surface-3-hi: #212630; --c-surface-3-lo: #1b1f27; --c-surface-2-lo: #171b21; /* ---- borders --------------------------------------------------------- */ --c-border: #22262e; --c-border-strong: #2f3540; --c-border-subtle: #1a1d23; --c-border-hover: #3a414e; /* interactive border on hover */ /* ---- washes: the handful of translucent overlays used repeatedly ------ */ --c-hover: rgba(255, 255, 255, 0.030); /* rows, table cells */ --c-hover-strong: rgba(255, 255, 255, 0.055); /* menu items */ --c-wash-foot: rgba(0, 0, 0, 0.17); /* card / modal footers */ --c-skeleton-hi: #232830; /* shimmer highlight */ --c-scroll-thumb: #2f3540; --c-scroll-thumb-hover: #3c434f; /* ---- text ------------------------------------------------------------ */ --c-text: #e9ecf1; --c-text-2: #a2abba; /* secondary */ --c-text-3: #6d7684; /* tertiary / metadata */ --c-text-inverse: #06090d; /* ---- one accent, used for actions + links ---------------------------- */ --c-accent: #4f8cff; --c-accent-hover: #6b9dff; --c-accent-active: #3d7af0; --c-accent-soft: rgba(79, 140, 255, 0.13); --c-accent-ring: rgba(79, 140, 255, 0.40); /* ---- semantic status ------------------------------------------------- */ --c-ok: #3ecf8e; --c-ok-soft: rgba(62, 207, 142, 0.13); --c-ok-border: rgba(62, 207, 142, 0.28); --c-warn: #f5b544; --c-warn-soft: rgba(245, 181, 68, 0.13); --c-warn-border: rgba(245, 181, 68, 0.28); --c-danger: #f96a6a; --c-danger-hover: #ff8181; --c-danger-soft: rgba(249, 106, 106, 0.13); --c-danger-border: rgba(249, 106, 106, 0.30); --c-neutral: #79828f; --c-neutral-soft: rgba(121, 130, 143, 0.14); --c-neutral-border:rgba(121, 130, 143, 0.26); /* ---- environment label ------------------------------------------------ One dedicated hue for the project environment badge, applied uniformly to Production/Staging/Development and to any other value -- never one hue per environment. Colour's job here is the category ("this is an environment label"); the text already says which one, so a second colour saying it again is the mistake charts.py documents for single-series charts. Violet is the only tone left that is not already spoken for: measured against the composited badge fill it clears 5.0:1 on every surface (6.14 on --c-bg, 5.42 on --c-surface-2, 5.00 on --c-surface-3 -- better than the --c-accent badge that already ships at 4.35-5.31), and it sits 134/144/89 degrees of OKLCH hue away from --c-ok / --c-warn / --c-danger, which is the adjacency that actually matters: an environment badge renders right next to a health badge. Its nearest neighbour is --c-accent at 32 degrees, which never shares a row with it. Structure carries the rest of the distinction -- see .badge--env below. */ --c-env: #a78bfa; --c-env-soft: rgba(167, 139, 250, 0.13); --c-env-border: rgba(167, 139, 250, 0.30); /* ---- typography ------------------------------------------------------ */ --font-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-2xs: 0.6875rem; /* 11px — micro labels */ --fs-xs: 0.75rem; /* 12px — metadata */ --fs-sm: 0.8125rem; /* 13px — dense UI text */ --fs-base: 0.875rem; /* 14px — body */ --fs-md: 0.9375rem; /* 15px — card titles */ --fs-lg: 1.0625rem; /* 17px — section titles */ --fs-xl: 1.375rem; /* 22px — page titles */ --fs-2xl: 1.75rem; /* 28px — hero / stat values */ --fs-3xl: 2.125rem; /* 34px */ --lh-tight: 1.2; --lh-snug: 1.4; --lh-base: 1.55; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 680; /* ---- spacing scale (4px base) ---------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 1.75rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; /* ---- control sizing -------------------------------------------------- One height scale shared by buttons, inputs, selects and pill controls so anything that can sit on the same row lines up without per-page nudging. */ --ctl-h-sm: 28px; --ctl-h: 34px; --ctl-h-lg: 40px; --ctl-icon: 30px; /* bare icon buttons (topbar, copy rows, account) */ /* ---- radii ----------------------------------------------------------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px; /* ---- shadows --------------------------------------------------------- */ --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.25); --sh-md: 0 4px 12px rgba(0, 0, 0, 0.42); --sh-lg: 0 12px 32px rgba(0, 0, 0, 0.50); --sh-xl: 0 24px 60px rgba(0, 0, 0, 0.60); /* ---- motion ---------------------------------------------------------- */ --t-fast: 110ms cubic-bezier(0.4, 0, 0.2, 1); --t-base: 160ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 260ms cubic-bezier(0.16, 1, 0.3, 1); /* ---- layout ---------------------------------------------------------- */ --sidebar-w: 248px; --topbar-h: 56px; --content-max: 1240px; /* ---- z-index --------------------------------------------------------- */ --z-sticky: 20; --z-drawer: 60; --z-overlay: 70; --z-modal: 80; --z-toast: 90; } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 1ms linear; --t-base: 1ms linear; --t-slow: 1ms linear; } }