/* AgentElite design tokens - from AE Admin spec + platform redesign Usage: set data-ae-theme="light" | "dark" on (or ). Default should follow prefers-color-scheme; persist user override in localStorage("ae-theme"). */ :root { /* Brand (theme-invariant) */ --ae-elite-blue: #11A7E0; --ae-action: #2D8FF0; --ae-ink-brand: #2B2B2E; --ae-success: #22B07D; --ae-warning: #F0A020; --ae-danger: #E5484D; --ae-ai-violet: #6B5BE6; /* Sidebar rail (same in both themes) */ --ae-rail-gradient: linear-gradient(170deg, #0B2A3C 0%, #0E5E86 115%); --ae-hero-gradient: linear-gradient(120deg, #0B2A3C 0%, #11A7E0 130%); --ae-rail-text: rgba(255,255,255,.70); --ae-rail-text-active: #FFFFFF; --ae-rail-item-active: rgba(255,255,255,.14); --ae-rail-item-hover: rgba(255,255,255,.12); --ae-rail-accent: #7FD4F5; /* HTTP method chips (Swagger) */ --ae-method-get: #2D8FF0; --ae-method-post: #22B07D; --ae-method-put: #F0A020; --ae-method-delete: #E5484D; /* Shape */ --ae-radius-input: 8px; /* inputs & buttons */ --ae-radius-card: 14px; /* cards 14-16px */ --ae-radius-card-lg: 16px; --ae-radius-pill: 999px; /* Space */ --ae-card-padding: 24px; --ae-grid-gap: 16px; --ae-sidebar-width: 232px; --ae-sidebar-width-collapsed: 64px; /* Focus */ --ae-focus-ring: 0 0 0 3px rgba(45,143,240,.22); /* Motion */ --ae-ease: cubic-bezier(.2,.7,.2,1); --ae-duration: 220ms; /* 200-250ms, no bounce */ /* Type */ --ae-font-heading: 'Poppins', sans-serif; /* 600-700: page titles, section & card headings */ --ae-font-body: 'Inter', system-ui, sans-serif; /* 400-600: labels, body, inputs */ --ae-font-mono: 'JetBrains Mono', monospace; /* IDs, URLs, refs - one-click copyable */ /* Scale: page title 26-30px/700 · card heading 15-17px/600 · label 12px/600 · body 13-14px */ } body[data-ae-theme="light"] { --bg: #F6F9FC; --surface: #FFFFFF; --surface2: #F1F5F9; --border: #E8EDF2; --ink: #2B2B2E; --muted: #5B6675; --faint: #98A4B3; --shadow: 0 2px 8px rgba(16,40,80,.07); --rowblue: rgba(45,143,240,.06); --rowgreen: rgba(34,176,125,.06); --rowred: rgba(229,72,77,.06); --rowamber: rgba(240,160,32,.07); } body[data-ae-theme="dark"] { --bg: #15171B; --surface: #1C1F24; --surface2: #22262C; --border: #2A2E35; --ink: #F2F5F8; --muted: #AEB6C2; --faint: #6C7684; --shadow: 0 2px 8px rgba(0,0,0,.3); --rowblue: rgba(45,143,240,.1); --rowgreen: rgba(34,176,125,.1); --rowred: rgba(229,72,77,.1); --rowamber: rgba(240,160,32,.11); background: #15171B; } /* Accent tints on dark surfaces: lighten fg one step - blue #5FAFF5 · elite #3FC0EC · violet #9C8DF2 · green #4CCDA0 */