/* ============================================================================= WPManager · wpm-tokens.css Iteration 5 — Admina reskin, production design tokens. Single source of truth for color, type, radius, spacing, shadow. Token NAMES come straight from the existing codebase (BRIEF.md §2); VALUES follow the Admina reference (design-brief/ADMINA-REFERENCE.md), so this drops into the ASP.NET / DevExtreme project as-is. Dark theme is default; add class .wpm-light on or for light. ============================================================================= */ :root { /* ---------- Surfaces (dark, default) ---------- */ --wpm-bg-app: #1B2431; /* page background, one notch below cards */ --wpm-bg-card: #273142; --wpm-bg-card-alt: #232C3B; --wpm-bg-input: #323D4E; --wpm-bg-popup: #273142; --wpm-bg-row-hover: #323D4E; --wpm-bg-row-alt: #232C3B; --wpm-bg-raised: #323D4E; /* hover / lifted surface */ --wpm-border: rgba(209,213,219,.2); --wpm-border-light: rgba(209,213,219,.32); --wpm-hairline: rgba(209,213,219,.12); /* subtle divider hairline */ --wpm-text-primary: #F5F6FA; --wpm-text-secondary: #9CA3AF; --wpm-text-label: #D1D5DB; --wpm-text-muted: #6B7280; --wpm-shadow-card: 0 2px 6px rgba(0,0,0,.18); --wpm-shadow-pop: 0 20px 60px rgba(4,6,15,.5); /* ---------- Brand (Admina indigo — flat, no gradients) ---------- */ --wpm-brand-1: #4F46E5; --wpm-brand-2: #4536B6; --wpm-brand-gradient: linear-gradient(0deg, #4F46E5, #4F46E5); /* flat on purpose */ --wpm-brand-ring: rgba(79,70,229,.18); /* focus ring */ --wpm-brand-glow: 0 2px 6px rgba(79,70,229,.25); /* soft shadow, not neon */ /* ---------- Semantic — base / deep / soft tint / hairline ---------- */ --wpm-success: #45B369; --wpm-success-deep: #006038; --wpm-success-soft: rgba(69,179,105,.15); --wpm-success-line: rgba(69,179,105,.4); --wpm-warning: #FF9F29; --wpm-warning-deep: #d77907; --wpm-warning-soft: rgba(255,159,41,.15); --wpm-warning-line: rgba(255,159,41,.4); --wpm-danger: #EF4444; --wpm-danger-deep: #B91C1C; --wpm-danger-soft: rgba(239,68,68,.15); --wpm-danger-line: rgba(239,68,68,.4); --wpm-info: #3B82F6; --wpm-info-deep: #1D4ED8; --wpm-info-soft: rgba(59,130,246,.15); --wpm-info-line: rgba(59,130,246,.4); --wpm-premium: #8252E9; /* plan / premium accent */ --wpm-premium-soft: rgba(130,82,233,.15); --wpm-premium-line: rgba(130,82,233,.4); --wpm-gold: #FF9F29; /* current-plan crown / badge */ --wpm-gold-soft: rgba(255,159,41,.15); /* ---------- Radius (Admina: 8 small/card · 12 large · pill) ---------- */ --wpm-r-sm: 8px; --wpm-r-md: 8px; --wpm-r-lg: 12px; --wpm-r-pill: 999px; /* ---------- Spacing (4pt grid) ---------- */ --wpm-s1: 4px; --wpm-s2: 8px; --wpm-s3: 12px; --wpm-s4: 16px; --wpm-s5: 20px; --wpm-s6: 24px; --wpm-s8: 32px; --wpm-s10: 40px; /* ---------- Type ---------- */ --wpm-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --wpm-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* type scale */ --wpm-fs-display: 30px; --wpm-fw-display: 720; --wpm-fs-h1: 22px; --wpm-fw-h1: 680; --wpm-fs-h2: 17px; --wpm-fw-h2: 640; --wpm-fs-body: 14px; --wpm-fs-sm: 13px; --wpm-fs-micro: 11px; } /* ============================================================================= Light theme — flip surfaces + text; semantic softs go pastel. Brand accents stay identical. Apply with (DevExtreme: pair with dx.light.css). ============================================================================= */ .wpm-light { --wpm-bg-app: #F5F6FA; --wpm-bg-card: #FFFFFF; --wpm-bg-card-alt: #F9FAFB; --wpm-bg-input: #FFFFFF; --wpm-bg-popup: #FFFFFF; --wpm-bg-row-hover: #F4F5FA; --wpm-bg-row-alt: #F9FAFB; --wpm-bg-raised: #F3F4F6; --wpm-border: #DFE0E2; --wpm-border-light: #D1D5DB; --wpm-hairline: rgba(17,24,39,.06); --wpm-text-primary: #111827; --wpm-text-secondary: #6B7280; --wpm-text-label: #374151; --wpm-text-muted: #9CA3AF; --wpm-shadow-card: 0 4px 30px rgba(46,45,116,.05); --wpm-shadow-pop: 0 20px 60px rgba(46,45,116,.12); --wpm-success-soft: #DAF0E1; --wpm-success-line: #B5E1C3; --wpm-warning-soft: #FFF9E2; --wpm-warning-line: #FFEBA6; --wpm-danger-soft: #FEE2E2; --wpm-danger-line: #FECACA; --wpm-info-soft: #EFF6FF; --wpm-info-line: #BFDBFE; --wpm-premium-soft: #EBD7FF; --wpm-premium-line: #dcc0f8; --wpm-gold-soft: #FFF9E2; }