/* =========================================================== mcpgate Design Tokens — Single Source of Truth =========================================================== Canonical design values for the entire mcpgate product line. Both the marketing site (mcpgate.de) and the gateway admin panel (ai-gateway) consume these tokens so visuals stay consistent across surfaces. SOURCE OF TRUTH: this file in mcpgate.de MIRROR: ai-gateway/static/css/tokens.css (1:1 copy) When you change a token: 1. Edit this file 2. Copy 1:1 to ai-gateway/static/css/tokens.css 3. Commit both repos together (PR descriptions should cross-reference each other) Naming convention: --bg-* page / card / input surfaces --text-* text colours (decreasing strength) --border-* borders & dividers --accent primary brand colour --accent-* glow / dim / hover variants of accent --status-* semantic status colours (semantic, not just hue) --btn-* button geometry & state --font-* font stacks --motion-* animation timings =========================================================== */ :root { color-scheme: dark; /* — Surfaces ———————————————————————————————————————— */ /* --bg is the single darkness knob (operator-settable in Branding). The page-surface ladder DERIVES from it via color-mix so one value drives the whole dark scale — lighten --bg and the cards/panels lift with it. Tuned so the default #08080c reproduces the previous hand-picked values. --bg-input / --bg-hover stay fixed: form-field surfaces are intentionally a warmer neutral, not part of the page darkness ramp. */ --bg: #08080c; /* page background (the darkness knob) */ --bg-raised: color-mix(in srgb, var(--bg), white 2%); /* one step lifted (secondary-button bg) */ --bg-card: color-mix(in srgb, var(--bg), white 4%); /* card / panel surface */ --bg-input: #252525; /* form-field surface (slightly warmer for inputs) */ --bg-hover: #2c2c2c; /* one tick brighter than --bg-input; used by clickable rows */ --icon-chip: #f5f5f5; /* light chip behind 3rd-party logo SVGs (many ship dark/transparent) — intentionally light in dark mode so the logo stays legible */ /* — Borders ————————————————————————————————————————— */ --border: #1e1e2e; --border-light: #2a2a3e; /* — Text ———————————————————————————————————————————— */ /* Contrast ratios are measured against --bg (#08080c). All three levels must clear WCAG AA (4.5:1 for normal text). --text-muted in particular has been bumped historically when Lighthouse audits flagged borderline failures on blog / docs metadata. Do NOT darken these below the values below without re-running the lighthouse:desktop / lighthouse:mobile jobs. */ --text: #e2e2ea; /* primary text — ~14:1 on --bg */ --text-dim: #9e9eb8; /* secondary text — ~8:1 on --bg */ --text-muted: #8e8ea6; /* tertiary / inactive — ~6:1 on --bg (AA safe) */ /* — Brand accent ——————————————————————————————————— */ --accent: #e8913a; /* mcpgate orange */ --accent-glow: #e8913a40; /* 25% alpha — for hover halos & glows */ --accent-dim: #c47228; /* darker hover state for filled accent */ /* — Semantic status colours —————————————————————— */ --red: #ef4444; --green: #34d399; --blue: #60a5fa; --purple: #a78bfa; --amber: #fbbf24; /* — Status surface roles ————————————————————————— */ /* Saturated variants used as solid filled backgrounds for pill labels, toast badges, button-warn / button-danger. Slightly darker than the accent text colours above so they read as "alert surface" rather than "bright accent text". */ --status-success: #10b981; /* solid green for success-bg */ --status-warning: #f59e0b; /* solid amber for warn-bg */ --status-danger: #dc3545; /* solid red for danger-bg */ --status-info: #2563eb; /* solid blue for info-bg */ /* — Soft-tint status surfaces (banners, badges, flash banners) —— Translucent variants of the saturated --status-* colours above. Use these instead of hand-rolled rgba(74,222,128,0.08) etc. The {bg, border, text} triple is sized to read at the same contrast as the corresponding `.flash` / badge / row patterns. */ --status-success-bg: rgba(74, 222, 128, 0.08); --status-success-border: rgba(74, 222, 128, 0.30); --status-success-text: #a7f3d0; --status-warning-bg: rgba(251, 191, 36, 0.08); --status-warning-border: rgba(251, 191, 36, 0.30); --status-warning-text: #fde68a; --status-danger-bg: rgba(239, 68, 68, 0.08); --status-danger-border: rgba(239, 68, 68, 0.30); --status-danger-text: #fca5a5; --status-info-bg: rgba(96, 165, 250, 0.08); --status-info-border: rgba(96, 165, 250, 0.30); --status-info-text: #bfdbfe; /* Neutral tint — "no state" / informational chips (roles, counts, plan tiers). Greys from the --gray-* ramp below. */ --status-neutral-bg: rgba(142, 142, 166, 0.10); --status-neutral-border: rgba(142, 142, 166, 0.28); --status-neutral-text: var(--text-dim); /* — Neutral greys —————————————————————————————— */ /* Used for borders, separators, muted surfaces that aren't part of the dark-bg cascade. Tailwind slate-700 / slate-500. */ --gray-700: #374151; --gray-500: #6b7280; --gray-400: #9ca3af; /* Code-syntax highlighting — the one palette that is its own domain (not theme/brand). Used by code blocks on the deploy / docs pages. Lives here as tokens so consumers reference var(--syntax-*) instead of hand-written hex. GitHub-dark-ish. */ --syntax-text: #c9d1d9; /* default code text */ --syntax-comment: #6a737d; --syntax-key: #79c0ff; /* keys / keywords */ --syntax-string: #a5d6ff; /* strings / values */ /* — Button geometry & state ———————————————————— Both mcpgate.de and ai-gateway component CSS should consume these tokens so hover / radius / padding behaves identically across products. */ --btn-radius: 8px; --btn-pad-x: 22px; --btn-pad-y: 14px; --btn-font-size: 15px; --btn-font-weight: 600; --btn-gap: 8px; --btn-line-height: 1.2; --btn-transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; /* Tier 1 — Primary. Bright brand bg + BLACK text (~8:1 AAA). Operator-configurable --brand-color overrides --accent. Hover BRIGHTENS the accent (lift-pattern) rather than darkening so the state change is clearly perceptible on dark surfaces — accent-dim was visually too close to accent for a confident hover affordance. */ --btn-primary-bg: var(--brand-color, var(--accent)); --btn-primary-bg-hover: color-mix(in srgb, var(--brand-color, var(--accent)), white 12%); --btn-primary-color: #000; --btn-primary-border: transparent; --btn-primary-shadow-hover: 0 4px 24px var(--accent-glow); /* Tier 2 — Secondary / Ghost. Neutral filled surface that reads as a button against BOTH the page bg (#08080c) and the card surface (--bg-card #12121c). Uses --border-light (#2a2a3e) so it's brighter than either container. Hover lifts one tick via color-mix to keep the rest/hover delta visible without adding another hard-coded token. No brand-coloured outline ring — keeps the surface calm. */ --btn-secondary-bg: var(--border-light); --btn-secondary-bg-hover: color-mix(in srgb, var(--border-light), white 8%); --btn-secondary-color: var(--text); --btn-secondary-border: transparent; /* Tier 3 — Tertiary / Link. No surface, no border. */ --btn-link-color: var(--text-dim); --btn-link-color-hover: var(--accent); /* — Type ———————————————————————————————————————————— */ --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, SFMono-Regular, monospace; /* — Type scale ———————————————————————————————————— Seven steps of visual hierarchy, top-down. Use the semantic token, not the px value — single-knob theming relies on it. Pair `--text-*` (size) with `--font-weight-*` and `--line-height-*` for full hierarchy control. Change the scale here, not at the consumer site. ————————————————————————————————————————————————— */ --text-h1: 32px; /* Page heading (rare in admin) */ --text-h2: 24px; /* Card title ("Identity", "Logging") */ --text-h3: 18px; /* Sub-section title */ --text-body-lg: 15px; /* Workhorse: nav items, form inputs, primary body */ --text-body: 14px; /* Secondary body: form labels, hints, menu rows */ --text-meta: 13px; /* Help text under inputs, uppercase labels, badges */ --text-caption: 11px; /* Smallest legible: footer, stat labels */ /* Font weights + line heights: declared once in the typography section below — the cascade makes a second copy here a silent override trap (two blocks once disagreed on --line-height-tight). */ /* — Motion —————————————————————————————————————————— */ --motion-fast: 0.15s ease; --motion-base: 0.2s ease; --motion-slow: 0.3s ease; /* — Component-size tokens ————————————————————————— Sizes for fixed chrome elements so per-page CSS doesn't hardcode the same magic numbers. --action-bar-h and --sidebar-w used to live in admin-buttons.css; they're here now so any consumer can reference them without pulling in the button stylesheet. */ --sidebar-w: 240px; --header-h: 56px; --action-bar-h: 64px; /* — Misc ———————————————————————————————————————————— */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35); /* — Spacing scale —————————————————————————————————— 4-point base. Use for padding / margin / gap. Sticking to multiples of 4 keeps pixel-snapping consistent on all DPI levels and avoids the "12px here, 14px there" drift that's the single biggest source of layout-noise. */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* (Legacy `--font-xs/sm/base/md/lg/xl/2xl` size aliases removed — unused in every consumer. The canonical type scale is the `--text-h1/h2/h3/body-lg/body/meta/caption` block at the top of this file.) */ /* — Font weights —————————————————————————————————— Names match Inter / system-stack semantic weights. */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* — Line heights —————————————————————————————————— */ --line-height-tight: 1.2; /* headings */ --line-height-base: 1.5; /* body text */ --line-height-relaxed: 1.7; /* long-form copy */ /* — Z-index scale —————————————————————————————————— Predefined stacking order so floating elements don't fight each other. Anything not in this scale should stay at z:auto. */ --z-base: 1; --z-sticky: 10; /* sticky page elements (status strips) */ --z-dropdown: 50; /* dropdown menus, tooltips */ --z-fixed-bar: 80; /* fixed action bars (save / pager) */ --z-modal-backdrop: 100; --z-modal: 110; --z-popover: 200; /* select popovers, autocomplete */ --z-toast: 300; /* transient notifications */ /* — Focus + disabled ————————————————————————————— A11y-consistent focus ring and disabled state. Each interactive element references these so keyboard / screen-reader users get the same affordance. TWO rings, deliberately. The ring is the ONLY focus affordance (the global rule below drops the outline), so it has to clear WCAG 1.4.11's 3:1 against whatever sits behind it — and that surface is not knowable here: --bg, --bg-card, --bg-input, and the intentionally LIGHT --icon-chip are all in play, as is any --accent the operator sets. A single translucent ring cannot satisfy all of them (40% accent over --bg computed to 2.14:1 with the default accent, and ~1.2:1 with a dark brand). The dark inner ring carries light surfaces, the lightened outer ring carries dark ones, so at least one edge clears 3:1 everywhere. Mixing toward white — rather than using the accent neat — is what keeps that true for a dark operator brand instead of only for the shipped amber. */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--accent) 60%, white); --focus-ring-offset: 2px; --opacity-disabled: 0.45; } /* — Global focus + disabled hooks —————————————————— Anything focusable in our app gets the unified ring; disabled gets unified opacity. Components can still opt out via :focus-visible { box-shadow: none; }. */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } /* Forced-colours (Windows High Contrast) discards box-shadow, and the rule above has already removed the outline — without this, keyboard focus is invisible for exactly the users most likely to rely on it. CanvasText is the system-chosen foreground, so it contrasts by definition. */ @media (forced-colors: active) { :focus-visible { outline: 2px solid CanvasText; outline-offset: var(--focus-ring-offset); box-shadow: none; } } [disabled], [aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none; } /* — Service / vendor logos ————————————————————————— Single canonical class for rendering 3rd-party service logos on a dark theme. The strong white plate guarantees visibility for ANY vendor icon — most are designed for light backgrounds anyway. Replaces the older per-service ``icon_invert_dark`` flag approach. Sizes: -sm 24px (compact rows), -md 32px (cards / tiles), -lg 48px (page header). All sizes share the plate + padding rhythm so the visual identity is the same everywhere the icon shows up. */ .svc-logo { background: #f5f5f5; object-fit: contain; border-radius: 6px; padding: 4px; flex-shrink: 0; display: inline-block; } .svc-logo-sm { width: 24px; height: 24px; padding: 3px; border-radius: 5px; } .svc-logo-md { width: 32px; height: 32px; } .svc-logo-lg { width: 48px; height: 48px; padding: 6px; border-radius: 8px; } /* — Visually-hidden utility ———————————————————————————— Standard "screen-reader-only" pattern from inclusive-components. Use for `

` page headings that exist only for AT (the visible page heading is the sidebar's aria-current="page" nav item) and for any text that would be redundant for sighted users but is the only accessible name for AT. Equivalent to Bootstrap's `.sr-only` / Tailwind's `.sr-only`. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* — Universal tooltip layer (consumed by tooltips.js) ———————— Native HTML title= popups have a ~700ms delay and ~5s timeout. The JS layer copies title="…" → data-tip="…" on hover and pins this element under the target. position:fixed, single instance appended to . */ .app-tooltip { position: fixed; z-index: var(--z-toast, 300); pointer-events: none; max-width: 300px; padding: 6px 10px; background: var(--bg-input, #252525); color: var(--text, #e2e2ea); border: 1px solid var(--border-light, #2a2a3e); border-radius: var(--radius-sm, 6px); font-size: 12.5px; line-height: 1.45; font-weight: 400; white-space: normal; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(2px); transition: opacity 0.08s ease, transform 0.08s ease; } .app-tooltip.is-visible { opacity: 1; transform: translateY(0); }