/* ========================================================================== Carbon — Design Tokens A monochrome system on neutral grays, signalled by a single blue highlight and a red reserved strictly for errors. Source of truth: ../../../design/tokens.css (theme: Carbon). This is a VENDORED copy — go:embed cannot reach across the module boundary into the repo-root design/ dir, so the tokens are mirrored here. Font tokens use the same system stacks as the wiki read surface, keeping the dashboard free of font downloads and external font origins. When the source tokens change, re-sync the non-font token values without replacing these system stacks. Layers: primitives (ramps + scales) -> semantic aliases -> component CSS. Components should reference the SEMANTIC tokens (--color-*, --space-*, etc.), not the raw ramp steps. ========================================================================== */ :root { /* ---------------------------------------------------------------------- PRIMITIVES — raw ramps. Reference these only when defining new semantic aliases, not directly in components. ---------------------------------------------------------------------- */ /* Neutral ramp — the workhorse. ~80% of the UI is built from these. */ --neutral-0: #FFFFFF; --neutral-50: #FAFAFA; --neutral-100: #F4F4F5; --neutral-200: #E4E4E7; --neutral-300: #D4D4D8; --neutral-400: #A1A1AA; --neutral-500: #71717A; --neutral-600: #52525B; --neutral-700: #3F3F46; --neutral-800: #27272A; --neutral-900: #18181B; --neutral-950: #09090B; /* Accent ramp (blue) — the ONLY signal color. */ --accent-50: #EFF6FF; --accent-100: #DBEAFE; --accent-300: #93C5FD; --accent-500: #3B82F6; --accent-600: #2563EB; --accent-700: #1D4ED8; /* Error ramp (red) — reserved for errors / destructive actions only. */ --error-50: #FEF2F2; --error-300: #FCA5A5; --error-500: #EF4444; --error-600: #DC2626; --error-700: #B91C1C; /* ---------------------------------------------------------------------- SEMANTIC COLOR — what components actually use. Re-point these (only these) to support theming / dark mode later. ---------------------------------------------------------------------- */ --color-bg: #FFFFFF; /* page background */ --color-surface: #FAFAFA; /* cards, panels */ --color-surface-2: #F4F4F5; /* recessed / inset surfaces */ --color-text: #09090B; /* primary text */ --color-text-muted: #52525B; /* secondary text */ --color-text-subtle: #A1A1AA; /* captions, placeholders */ --color-border: #E4E4E7; /* hairline separators */ --color-border-strong: #D4D4D8; /* emphasized edges */ --color-accent: #2563EB; /* links, primary, focus */ --color-accent-weak: #EFF4FE; /* accent tint / focus ring */ --color-accent-fg: #FFFFFF; /* text/icon on accent fill */ --color-error: #DC2626; /* error / destructive */ --color-error-weak: #FEF2F2; /* error tint background */ /* ---------------------------------------------------------------------- TYPOGRAPHY ---------------------------------------------------------------------- */ --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo, Consolas, monospace; /* Type scale — size / line-height / weight. (Letter-spacing: -.02em on sizes above 28px; 0 otherwise.) */ --text-display-size: 56px; --text-display-lh: 1.04; --text-display-weight: 700; --text-h1-size: 40px; --text-h1-lh: 1.1; --text-h1-weight: 600; --text-h2-size: 30px; --text-h2-lh: 1.16; --text-h2-weight: 600; --text-h3-size: 22px; --text-h3-lh: 1.25; --text-h3-weight: 600; --text-body-lg-size: 18px; --text-body-lg-lh: 1.6; --text-body-lg-weight: 400; --text-body-size: 15px; --text-body-lh: 1.6; --text-body-weight: 400; --text-small-size: 13px; --text-small-lh: 1.5; --text-small-weight: 400; --text-label-size: 12px; --text-label-lh: 1.4; --text-label-weight: 500; /* ---------------------------------------------------------------------- SPACING — 4px grid. Never use arbitrary values. ---------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* ---------------------------------------------------------------------- SIZING — control heights, icons, avatars. ---------------------------------------------------------------------- */ --control-h-sm: 30px; --control-h-md: 38px; --control-h-lg: 46px; --icon-sm: 14px; --icon-md: 18px; --icon-lg: 24px; --avatar-sm: 24px; --avatar-md: 36px; --avatar-lg: 48px; --touch-target-min: 44px; /* minimum hit area for interactive elements */ /* ---------------------------------------------------------------------- LAYOUT — max content width, gutters, grid. (Breakpoints below are for reference; CSS custom properties can't be used inside @media.) sm 640px · md 768px · lg 1024px · xl 1280px ---------------------------------------------------------------------- */ --layout-max-width: 1120px; --layout-gutter: 32px; --layout-columns: 12; --layout-col-gap: 24px; /* ---------------------------------------------------------------------- BORDERS & RADIUS — tight corners; prefer hairline borders to shadow. ---------------------------------------------------------------------- */ --border-width: 1px; /* default hairline */ --border-width-strong: 2px; /* emphasis / focus */ --border-width-heavy: 4px; /* active / selected */ --radius-sm: 2px; --radius: 4px; /* default */ --radius-lg: 8px; --radius-xl: 14px; --radius-pill: 999px; /* ---------------------------------------------------------------------- SHADOW & ELEVATION — subtle. Elevation: 0 flat · 1 raised(sm) · 2 overlay(md) · 3 floating(lg) · 4 top(xl). ---------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(9,9,11,.06); --shadow-md: 0 4px 14px rgba(9,9,11,.09); --shadow-lg: 0 12px 28px rgba(9,9,11,.12); --shadow-xl: 0 24px 48px rgba(9,9,11,.16); /* ---------------------------------------------------------------------- MOTION ---------------------------------------------------------------------- */ --duration-instant: 0ms; --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --duration-slower: 480ms; --ease-standard: cubic-bezier(.2,0,0,1); /* most transitions */ --ease-entrance: cubic-bezier(0,0,0,1); /* elements appearing */ --ease-exit: cubic-bezier(.3,0,1,1); /* elements leaving */ --ease-spring: cubic-bezier(.5,1.5,.4,1); /* playful emphasis */ /* ---------------------------------------------------------------------- Z-INDEX — named layers. Never hand-tune stacking. ---------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-dropdown: 1000; --z-overlay: 1100; --z-modal: 1200; --z-popover: 1300; --z-toast: 1400; --z-tooltip: 1500; }