/* ============================================================ ET.RFGateWay Admin — Design Tokens (theme.css) Canonical token vocabulary: --rg-* Light theme default; dark via [data-theme="dark"] on . ============================================================ */ :root { /* Surfaces */ --rg-bg: #f4f6fb; --rg-bg-strong: #eaeef6; --rg-surface: #ffffff; --rg-surface-muted: #f7f9fc; --rg-surface-raised: #ffffff; /* Borders */ --rg-border: #dfe5ef; --rg-border-strong: #c8d1e0; /* Text */ --rg-text: #101828; --rg-text-muted: #5b6474; --rg-text-soft: #8a93a6; /* Brand */ --rg-primary: #4f46e5; --rg-primary-hover: #4338ca; --rg-primary-soft: #eef2ff; --rg-on-primary: #ffffff; --rg-brand-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); /* Status */ --rg-success: #047857; --rg-success-soft: #ecfdf5; --rg-warning: #b45309; --rg-warning-soft: #fffbeb; --rg-danger: #dc2626; --rg-danger-hover: #b91c1c; --rg-danger-soft: #fef2f2; --rg-info: #0369a1; --rg-info-soft: #f0f9ff; --rg-neutral-soft: #eef1f6; /* Sidebar */ --rg-sidebar-bg: #0e1526; --rg-sidebar-accent: #131c33; --rg-sidebar-text: #97a2ba; --rg-sidebar-text-active: #ffffff; --rg-sidebar-hover: rgba(148, 163, 199, 0.12); --rg-sidebar-border: rgba(148, 163, 199, 0.14); /* Radii */ --rg-radius-sm: 8px; --rg-radius-md: 12px; --rg-radius-lg: 16px; --rg-radius-xl: 22px; --rg-radius-pill: 999px; /* Elevation */ --rg-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.07); --rg-shadow-md: 0 10px 28px -6px rgba(15, 23, 42, 0.14), 0 2px 8px -2px rgba(15, 23, 42, 0.06); --rg-shadow-lg: 0 24px 56px -12px rgba(15, 23, 42, 0.25); --rg-shadow-overlay: 0 28px 70px -16px rgba(15, 23, 42, 0.42); --rg-ring: 0 0 0 3px rgba(79, 70, 229, 0.18); /* Spacing */ --rg-space-1: 4px; --rg-space-2: 8px; --rg-space-3: 12px; --rg-space-4: 16px; --rg-space-5: 20px; --rg-space-6: 24px; --rg-space-8: 32px; --rg-space-10: 40px; --rg-space-12: 48px; /* Typography */ --rg-font-sans: "Inter", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; --rg-font-mono: "JetBrains Mono", ui-monospace, Consolas, Monaco, "Courier New", monospace; --rg-font-size-xs: 0.75rem; --rg-font-size-sm: 0.8125rem; --rg-font-size-base: 0.875rem; --rg-font-size-md: 0.9375rem; --rg-font-size-lg: 1.0625rem; --rg-font-size-xl: 1.25rem; --rg-font-size-2xl: 1.5rem; --rg-font-size-3xl: 1.875rem; /* Shell metrics */ --rg-sidebar-width: 260px; --rg-sidebar-collapsed-width: 72px; --rg-topbar-height: 62px; --rg-content-max: 1480px; /* Motion */ --rg-ease: cubic-bezier(0.4, 0, 0.2, 1); --rg-fast: 130ms var(--rg-ease); --rg-slow: 220ms var(--rg-ease); /* Z-index */ --rg-z-topbar: 40; --rg-z-sidebar: 50; --rg-z-overlay: 90; --rg-z-modal: 100; --rg-z-toast: 120; color-scheme: light; } [data-theme="dark"] { --rg-bg: #0a101e; --rg-bg-strong: #080d19; --rg-surface: #111a2e; --rg-surface-muted: #0d1526; --rg-surface-raised: #16213a; --rg-border: #22304d; --rg-border-strong: #344361; --rg-text: #edf1f9; --rg-text-muted: #98a4bb; --rg-text-soft: #66748f; --rg-primary: #818cf8; --rg-primary-hover: #a5b0fc; --rg-primary-soft: #1d2544; --rg-on-primary: #0b1120; --rg-success: #34d399; --rg-success-soft: #0d2b23; --rg-warning: #fbbf24; --rg-warning-soft: #33270f; --rg-danger: #f87171; --rg-danger-hover: #fca5a5; --rg-danger-soft: #33191d; --rg-info: #38bdf8; --rg-info-soft: #0c2536; --rg-neutral-soft: #1b2540; --rg-sidebar-bg: #070c17; --rg-sidebar-accent: #0c1322; --rg-sidebar-text: #8391ad; --rg-sidebar-hover: rgba(129, 140, 248, 0.10); --rg-sidebar-border: rgba(147, 161, 191, 0.12); --rg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --rg-shadow-md: 0 10px 28px -6px rgba(0, 0, 0, 0.55); --rg-shadow-lg: 0 24px 56px -12px rgba(0, 0, 0, 0.65); --rg-shadow-overlay: 0 28px 70px -16px rgba(0, 0, 0, 0.8); --rg-ring: 0 0 0 3px rgba(129, 140, 248, 0.30); color-scheme: dark; }