/* AiHummer Admin UI — EMCHummer Design-System stylesheet (§6.16). Framework-free; served at /admin/style.css. Composition: 1) webfonts + icon font (Onest / Manrope / JetBrains Mono / Phosphor) 2) design tokens (colors, typography, spacing, motion) — dark-first + light theme 3) the realized design component system (app.css) — shell, cards, lists, tables, badges, buttons, forms, modals, drawers, toasts, palette, chat 4) the admin-UI screen rules (the existing per-screen markup) — kept intact so every screen stays styled and functional while adopting the design look 5) a shell layer mapping the admin shell onto the design's .app/.side/.main grid Set data-theme="dark" (default) | "light" on . */ /* ---- 1) webfonts + icon font ---- */ @import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Anton&display=swap'); /* ---- 2) design tokens ---- Warm-charcoal + ember language. Dark-first with a native warm-cream light theme. Use semantic --em-* tokens in product code; raw hex only belongs in this file. Set the theme with data-theme="dark" | "light" on . */ :root { /* Brand constants — identical in both themes */ --em-accent: #F0632E; /* signature ember — actions, active, key data */ --em-accent-bright: #FF8A4C; /* hover / gradient top */ --em-accent-ink: #ffffff; /* text on accent fills */ --em-glow: 255, 128, 46; } :root, [data-theme="dark"] { color-scheme: dark; /* Backgrounds */ --em-bg: #070504; /* app canvas */ --em-bg-sub: #0B0807; /* sidebar / subtle bands */ /* Surfaces */ --em-surface: #100B09; --em-surface-2: #150E0B; --em-surface-3: #1C140F; /* Lines */ --em-line: #241B16; --em-line-strong: #33271F; /* Text */ --em-text: #F4ECE2; --em-text-dim: #B6A99C; --em-text-muted: #7C6F63; --em-text-faint: #4D4138; /* Accent surfaces (theme-tuned) */ --em-accent-soft: rgba(240, 99, 46, 0.14); --em-accent-edge: rgba(240, 99, 46, 0.42); --em-accent-text: #FF9A5E; /* accent legible on dark surfaces */ --em-amber: #E89A4E; /* warm data / units */ /* Status — fg + soft bg */ --em-ok: #6FBF8A; --em-ok-soft: rgba(111, 191, 138, 0.14); --em-warn: #E0A53A; --em-warn-soft: rgba(224, 165, 58, 0.14); --em-err: #E5604A; --em-err-soft: rgba(229, 96, 74, 0.14); --em-info: #6FA8D8; --em-info-soft: rgba(111, 168, 216, 0.14); /* Elevation */ --em-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.4); --em-shadow-md: 0 18px 44px rgba(0, 0, 0, 0.5); --em-shadow-glow: 0 8px 22px rgba(240, 99, 46, 0.4); } [data-theme="light"] { color-scheme: light; --em-bg: #F4EEE6; --em-bg-sub: #EFE7DB; --em-surface: #FFFFFF; --em-surface-2: #F8F2EA; --em-surface-3: #F2EADF; --em-line: #E8DDD0; --em-line-strong: #D9CCBB; --em-text: #1A130D; --em-text-dim: #5A4F44; --em-text-muted: #8B7E6F; --em-text-faint: #B4A795; --em-accent-soft: rgba(240, 99, 46, 0.12); --em-accent-edge: rgba(240, 99, 46, 0.34); --em-accent-text: #C2491A; /* deepened for contrast on cream */ --em-amber: #B5780F; --em-ok: #2E9156; --em-ok-soft: rgba(46, 145, 86, 0.10); --em-warn: #B5840C; --em-warn-soft: rgba(181, 132, 12, 0.12); --em-err: #CF4B36; --em-err-soft: rgba(207, 75, 54, 0.10); --em-info: #2C7BB6; --em-info-soft: rgba(44, 123, 182, 0.10); --em-shadow-sm: 0 8px 22px rgba(60, 46, 34, 0.10); --em-shadow-md: 0 18px 40px rgba(60, 46, 34, 0.14); --em-shadow-glow: 0 8px 20px rgba(240, 99, 46, 0.26); } /* ---- typography ---- Display/headings: Onest. Body/UI: Manrope. Data/labels/code: JetBrains Mono. Poster (optional, Latin-only): Anton. Numbers use tabular figures in data contexts. */ :root { --em-font-display: "Onest", system-ui, sans-serif; --em-font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --em-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --em-font-poster: "Anton", "Onest", sans-serif; /* Latin only — fallback to Onest for Cyrillic */ /* Type scale — size / weight / track per role */ --em-display-lg-size: 64px; --em-display-lg-weight: 800; --em-display-lg-track: -0.045em; --em-display-md-size: 44px; --em-display-md-weight: 800; --em-display-md-track: -0.04em; --em-heading-lg-size: 30px; --em-heading-lg-weight: 700; --em-heading-lg-track: -0.03em; --em-heading-md-size: 20px; --em-heading-md-weight: 700; --em-heading-md-track: -0.02em; --em-heading-sm-size: 15px; --em-heading-sm-weight: 700; --em-heading-sm-track: -0.01em; --em-body-lg-size: 16px; --em-body-lg-weight: 500; --em-body-md-size: 14px; --em-body-md-weight: 500; --em-body-sm-size: 13px; --em-body-sm-weight: 500; --em-label-size: 11px; --em-label-weight: 500; --em-label-track: 0.1em; --em-code-size: 13px; --em-code-weight: 400; /* Line-heights (unitless) */ --em-display-lg-line: 0.92; --em-display-md-line: 0.96; --em-heading-lg-line: 1.0; --em-heading-md-line: 1.1; --em-heading-sm-line: 1.2; --em-body-lg-line: 1.6; --em-body-md-line: 1.55; --em-body-sm-line: 1.5; --em-label-line: 1.2; --em-code-line: 1.5; } /* ---- radius / spacing / elevation ---- 4px base. Separation comes from hairline borders + surface contrast first; shadows are reserved for floating overlays; ember glow for one highlighted action. */ :root { /* Radius — the language runs tight-to-medium */ --em-radius-xs: 5px; --em-radius-sm: 7px; --em-radius-md: 9px; --em-radius-lg: 14px; --em-radius-xl: 18px; --em-radius-full: 999px; /* Spacing — 4px base */ --em-space-1: 4px; --em-space-2: 8px; --em-space-3: 12px; --em-space-4: 16px; --em-space-5: 20px; --em-space-6: 24px; --em-space-8: 32px; --em-space-10: 40px; --em-space-12: 48px; --em-space-16: 64px; /* Motion — calm fades, ease-out */ --em-dur-fast: 130ms; --em-dur-normal: 190ms; --em-dur-slow: 280ms; --em-ease: cubic-bezier(.2, .8, .2, 1); /* Stacking */ --em-z-sticky: 20; --em-z-dropdown: 40; --em-z-modal: 70; --em-z-toast: 90; } /* ---- motion ---- Calm, purposeful animation. Every entrance fades+moves (never a bare appear); hover/press are subtle and usability-safe. All gated on prefers-reduced-motion. Use the --em-dur-* / --em-ease tokens (tokens/spacing.css) for ad-hoc transitions. */ @keyframes em-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes em-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes em-fade-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes em-scale-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } @keyframes em-pop-in { 0% { opacity: 0; transform: scale(.9); } 60% { transform: scale(1.02); } 100% { opacity: 1; transform: none; } } @keyframes em-slide-right { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } } @keyframes em-slide-in-r { from { transform: translateX(110%); } to { transform: none; } } @keyframes em-spin { to { transform: rotate(360deg); } } @keyframes em-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } @keyframes em-shimmer { from { background-position: -160% 0; } to { background-position: 260% 0; } } /* ---- entrance utilities ---- */ .em-anim-fade { animation: em-fade-in var(--em-dur-slow) var(--em-ease) both; } .em-anim-up { animation: em-fade-up var(--em-dur-slow) var(--em-ease) both; } .em-anim-down { animation: em-fade-down var(--em-dur-slow) var(--em-ease) both; } .em-anim-scale { animation: em-scale-in var(--em-dur-normal) var(--em-ease) both; } .em-anim-pop { animation: em-pop-in var(--em-dur-slow) var(--em-ease-emphasized, var(--em-ease)) both; } .em-anim-slide { animation: em-slide-right var(--em-dur-slow) var(--em-ease) both; } /* staggered children — for lists, grids, stat rows */ .em-stagger > * { animation: em-fade-up var(--em-dur-slow) var(--em-ease) both; } .em-stagger > *:nth-child(1){ animation-delay: 40ms; } .em-stagger > *:nth-child(2){ animation-delay: 90ms; } .em-stagger > *:nth-child(3){ animation-delay: 140ms; } .em-stagger > *:nth-child(4){ animation-delay: 190ms; } .em-stagger > *:nth-child(5){ animation-delay: 240ms; } .em-stagger > *:nth-child(6){ animation-delay: 290ms; } .em-stagger > *:nth-child(7){ animation-delay: 340ms; } .em-stagger > *:nth-child(8){ animation-delay: 390ms; } /* ---- interaction utilities (usability-safe) ---- */ .em-press { transition: transform var(--em-dur-fast) var(--em-ease); } .em-press:active { transform: translateY(1px) scale(.985); } .em-lift { transition: transform var(--em-dur-normal) var(--em-ease), box-shadow var(--em-dur-normal) var(--em-ease); } .em-lift:hover { transform: translateY(-2px); box-shadow: var(--em-shadow-sm); } /* ---- loading affordances ---- */ .em-spin { animation: em-spin .7s linear infinite; } .em-pulse { animation: em-pulse 1.4s var(--em-ease) infinite; } .em-skeleton { background: linear-gradient(90deg, var(--em-surface-2) 0%, var(--em-surface-3) 50%, var(--em-surface-2) 100%); background-size: 220% 100%; animation: em-shimmer 1.5s linear infinite; border-radius: var(--em-radius-sm); } @media (prefers-reduced-motion: reduce) { .em-anim-fade, .em-anim-up, .em-anim-down, .em-anim-scale, .em-anim-pop, .em-anim-slide, .em-stagger > * { animation: em-fade-in var(--em-dur-fast) var(--em-ease) both; } .em-press:active { transform: none; } .em-lift:hover { transform: none; } .em-spin, .em-pulse, .em-skeleton { animation-duration: .001ms; animation-iteration-count: 1; } } /* ---- 3) design component system (app.css) ---- */ /* AiHummer — production web app prototype Built entirely on EMCHummer design tokens (var(--em-*)). No raw hex outside brand gradients. */ html, body{ height:100%; } body{ background:var(--em-bg); color:var(--em-text); font-family:var(--em-font-sans); font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; } ::selection{ background:var(--em-accent-soft); color:var(--em-accent-text); } .mono{ font-family:var(--em-font-mono); } .tnum{ font-variant-numeric:tabular-nums; } .sp{ flex:1; } [hidden]{ display:none !important; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background:var(--em-line-strong); border-radius:99px; border:3px solid var(--em-bg); } ::-webkit-scrollbar-thumb:hover{ background:var(--em-text-faint); } /* ============ SHELL ============ */ .app{ display:grid; grid-template-columns:236px 1fr; height:100vh; } .app.auth-mode{ grid-template-columns:1fr; } .app.auth-mode .side{ display:none; } /* ---- sidebar ---- */ .side{ border-right:1px solid var(--em-line); background:var(--em-bg-sub); display:flex; flex-direction:column; padding:16px 12px; gap:2px; min-height:0; } .brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 14px; cursor:pointer; } /* BUGS_8 #47: the sidebar brand lockup is a