/* ══════════════════════════════════════════════════════ EdgeWorks Apps — Aurora Design System Ported from edge4ward-ui (edge4field project). Apply data-theme="aurora" on to activate. ══════════════════════════════════════════════════════ */ /* ─── Shared geometry, motion & elevation ─────────────── */ :root { --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; --ease: cubic-bezier(.2,.7,.3,1); --speed: .16s; --shadow-ink: 26,19,37; --elev-1: 0 1px 2px rgba(var(--shadow-ink),.07), 0 1px 6px rgba(var(--shadow-ink),.05); --elev-2: 0 2px 6px rgba(var(--shadow-ink),.08), 0 8px 24px rgba(var(--shadow-ink),.09); --elev-3: 0 6px 16px rgba(var(--shadow-ink),.14), 0 24px 60px rgba(var(--shadow-ink),.18); } /* ─── Aurora theme tokens ──────────────────────────────── */ [data-theme="aurora"] { /* Core design tokens — same names as edge4ward-ui */ --bg-base: #F4F2F8; --bg-surface: #FFFFFF; --bg-elevated: #F1EDF9; --text-primary: #1A1325; --text-secondary: #574F66; --text-muted: #6B6478; --accent: #6200EE; --accent-hover: #7C3AED; --accent-text: #ffffff; --accent-subtle: #F1EAFE; --border: #DDD5EC; --border-subtle: #E9E4F2; --status-ok: #0E9F6E; --status-warn: #D97706; --status-error: #DC2626; --status-ok-bg: #E6F7F1; --status-warn-bg: #FEF3E2; --status-error-bg: #FDEAEA; --shadow: 0 2px 12px rgba(26,19,37,.10); --scrollbar: #C9C0DC; --shadow-ink: 26,19,37; /* Legacy EW aliases — existing inline styles keep working */ --bg: #F4F2F8; --surface: #FFFFFF; --surface-2: #F1EDF9; --card: #F1EDF9; --text: #1A1325; --muted: #6B6478; --dim: #6B6478; --ink: #ffffff; --border-strong: #DDD5EC; /* Per-suite accent colours */ --accent2: #DC2626; --accent3: #7C3AED; } /* ─── Base — applied under aurora theme ────────────────── */ [data-theme="aurora"] body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-base); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [data-theme="aurora"] button:focus-visible, [data-theme="aurora"] a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(98,0,238,.28); } [data-theme="aurora"] input:focus, [data-theme="aurora"] select:focus, [data-theme="aurora"] textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(98,0,238,.14); } [data-theme="aurora"] ::selection { background: var(--accent); color: var(--accent-text); } [data-theme="aurora"] ::placeholder { color: var(--text-muted); opacity: .7; } [data-theme="aurora"] ::-webkit-scrollbar { width: 4px; } [data-theme="aurora"] ::-webkit-scrollbar-track { background: transparent; } [data-theme="aurora"] ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 2px; } /* ─── Page layout ──────────────────────────────────────── */ .e4-page { max-width: 1100px; margin: 0 auto; } @media (min-width: 2000px) { .e4-page { max-width: 1560px; } } /* ─── Cards ─────────────────────────────────────────────── */ .e4-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--elev-1); transition: box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease), border-color var(--speed) var(--ease); } .e4-card--hover:hover { box-shadow: var(--elev-2); transform: translateY(-2px); border-color: var(--border); } .e4-card--pad { padding: 16px 20px; } .e4-card--flush { overflow: hidden; } /* ─── KPI tiles ─────────────────────────────────────────── */ .e4-kpi { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--elev-1); padding: 14px 20px; } .e4-kpi__value { font-size: 28px; font-weight: 800; letter-spacing: -1px; line-height: 1.15; color: var(--text-primary); } .e4-kpi__label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-top: 2px; } .e4-kpi--ok .e4-kpi__value { color: var(--status-ok); } .e4-kpi--warn .e4-kpi__value { color: var(--status-warn); } .e4-kpi--error .e4-kpi__value { color: var(--status-error); } .e4-kpi--accent .e4-kpi__value { color: var(--accent); } /* ─── Status badges ─────────────────────────────────────── */ .e4-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); padding: 4px 12px 4px 9px; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; } .e4-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .e4-badge--ok { background: var(--status-ok-bg); color: var(--status-ok); } .e4-badge--warn { background: var(--status-warn-bg); color: var(--status-warn); } .e4-badge--error { background: var(--status-error-bg); color: var(--status-error); } .e4-badge--neutral { background: var(--bg-elevated); color: var(--text-secondary); } .e4-badge--accent { background: var(--accent-subtle); color: var(--accent); } /* ─── Chips ──────────────────────────────────────────────── */ .e4-chip { display: inline-block; background: var(--accent-subtle); color: var(--accent); border-radius: var(--radius-xs); padding: 2px 8px; font-size: 11px; font-weight: 700; white-space: nowrap; } .e4-chip--mono { font-family: ui-monospace, Consolas, monospace; font-weight: 600; } /* ─── Metric tiles ───────────────────────────────────────── */ .e4-tile { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px 8px; text-align: center; cursor: pointer; transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease); } .e4-tile:hover { border-color: var(--accent); box-shadow: var(--elev-1); transform: translateY(-1px); } .e4-tile__value { font-size: 14px; font-weight: 800; color: var(--text-primary); } .e4-tile__label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); margin-top: 2px; } .e4-tile--ok .e4-tile__value { color: var(--status-ok); } .e4-tile--warn .e4-tile__value { color: var(--status-warn); } .e4-tile--error .e4-tile__value { color: var(--status-error); } /* ─── Section headers ────────────────────────────────────── */ .e4-page-title { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--text-primary); margin: 0; } .e4-page-sub { font-size: 13.5px; color: var(--text-secondary); margin: 4px 0 0; max-width: 640px; } .e4-section-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); } /* ─── Top bar ────────────────────────────────────────────── */ .e4-topbar { background: linear-gradient(100deg, var(--bg-surface), color-mix(in srgb, var(--accent) 8%, var(--bg-surface))); border-bottom: 1px solid var(--border-subtle); } /* ─── Modal / overlay ────────────────────────────────────── */ .e4-overlay { position: fixed; inset: 0; background: rgba(var(--shadow-ink),.40); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 60; animation: e4-fade var(--speed) var(--ease); } .e4-modal { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--elev-3); max-width: 720px; width: 92%; max-height: 86vh; overflow-y: auto; padding: 22px 26px; animation: e4-pop calc(var(--speed) * 1.4) var(--ease); } /* ─── Empty states ───────────────────────────────────────── */ .e4-empty { border: 2px dashed var(--border); border-radius: var(--radius-xl); background: var(--bg-surface); padding: 48px 24px; text-align: center; color: var(--text-secondary); } .e4-empty__icon { font-size: 36px; } .e4-empty__title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 8px 0 4px; } /* ─── Alert rows ─────────────────────────────────────────── */ .e4-alert { display: flex; gap: 9px; align-items: flex-start; border-radius: var(--radius-md); padding: 8px 12px; font-size: 12.5px; line-height: 1.5; border-left: 3px solid transparent; } .e4-alert--error { background: var(--status-error-bg); border-left-color: var(--status-error); } .e4-alert--warn { background: var(--status-warn-bg); border-left-color: var(--status-warn); } .e4-alert--ok { background: var(--status-ok-bg); border-left-color: var(--status-ok); } .e4-alert--info { background: var(--bg-elevated); border-left-color: var(--text-muted); } /* ─── Animations ─────────────────────────────────────────── */ @keyframes e4-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes e4-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes e4-slide-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .e4-enter { animation: e4-slide-up calc(var(--speed) * 1.6) var(--ease); }