/* ============================================================ CoinRoutes Billing — design tokens Light/dark themes switched via . Hues are aligned with the django-unfold admin palette (slate base + cobalt primary) so portal and admin feel like one product. ============================================================ */ :root { /* Typography */ --font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* Surfaces */ --bg: #f4f6f8; --bg-texture-line: rgba(15, 38, 56, 0.035); --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #eef1f4; --border: #dde3ea; --border-strong: #c3ccd6; /* Ink */ --text: #16222c; --text-muted: #5c6b7a; --text-faint: #8b97a3; /* Accent — cobalt */ --primary: #1d5fd2; --primary-hover: #174db0; --primary-soft: #e8effc; --on-primary: #ffffff; --glow: rgba(29, 95, 210, 0.10); /* Status */ --success: #178244; --success-soft: #e2f5e9; --warning: #a16207; --warning-soft: #fdf3d6; --danger: #c22f2c; --danger-soft: #fce8e7; --info: #0e7490; --info-soft: #e0f4f9; /* Shape + elevation */ --radius: 10px; --radius-sm: 7px; --shadow-card: 0 1px 2px rgba(22, 34, 44, 0.05), 0 4px 16px rgba(22, 34, 44, 0.06); --shadow-pop: 0 8px 30px rgba(22, 34, 44, 0.14); color-scheme: light; } html[data-theme="dark"] { /* Surfaces — CoinRoutes deep blue-slate brand */ --bg: #0f181d; --bg-texture-line: rgba(146, 184, 211, 0.045); --surface: #192429; --surface-raised: #1e2b31; --surface-sunken: #0c1418; --border: #2a3a42; --border-strong: #3a4e58; /* Ink */ --text: #e8eef2; --text-muted: #9fb0bc; --text-faint: #6d7f8b; /* Accent — cobalt lifted for dark */ --primary: #4f8ef5; --primary-hover: #6da2f8; --primary-soft: #14253f; --on-primary: #0b1220; --glow: rgba(79, 142, 245, 0.13); /* Status */ --success: #41c878; --success-soft: #11301e; --warning: #e3b341; --warning-soft: #332811; --danger: #f0635f; --danger-soft: #361413; --info: #4cc3dd; --info-soft: #0d2a33; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.30); --shadow-pop: 0 10px 36px rgba(0, 0, 0, 0.5); color-scheme: dark; }