/* ============================================================================ oiPay — Material Design 3 Token System (Admin + User panel) Modern-Fintech premium palette. Loaded AFTER app.min.css / style.css / components.css and consumed by material.css. Dark theme = (blithe scripts.js toggleTheme()). Nothing here changes behaviour — presentation tokens only. ========================================================================== */ :root { /* ---- Brand ---------------------------------------------------------- */ --md-primary: #5a4bff; /* deep indigo-violet */ --md-primary-hover: #4a3ce6; --md-primary-press: #3f33cc; --md-on-primary: #ffffff; --md-primary-container: #e8e5ff; --md-on-primary-container:#1a0e63; --md-secondary: #00b8a6; /* emerald / teal accent */ --md-on-secondary: #ffffff; --md-secondary-container:#c9f4ee; --md-on-secondary-container:#00332e; --md-tertiary: #ff6b57; /* warm coral for highlights */ --md-on-tertiary: #ffffff; /* ---- Status ------------------------------------------------------------ */ --md-success: #1f9d57; --md-success-container: #d8f3e2; --md-warning: #d98a00; --md-warning-container: #fdeecd; --md-error: #d92d20; --md-error-container: #fbe0dd; --md-info: #2f6feb; --md-info-container: #dbe8ff; /* ---- Surfaces — clean white premium -------------------------------- */ --md-background: #f7f8fc; /* barely-there cool white page */ --md-surface: #ffffff; --md-surface-1: #ffffff; --md-surface-2: #f8f9fd; --md-surface-3: #f2f4fa; --md-surface-container: #eef1f8; --md-surface-variant: #e9ecf5; /* ---- Text / lines --------------------------------------------------- */ --md-on-surface: #171821; --md-on-surface-medium: #494c5a; --md-on-surface-muted: #7a7d8f; --md-outline: #dfe2ec; --md-outline-variant: #edeff5; /* ---- Elevation — soft, diffuse, premium (barely-there) ------------- */ --md-elev-1: 0 1px 2px rgba(23,24,60,.04), 0 2px 8px rgba(23,24,60,.04); --md-elev-2: 0 2px 6px rgba(23,24,60,.05), 0 8px 24px rgba(23,24,60,.06); --md-elev-3: 0 8px 20px rgba(23,24,60,.07), 0 16px 44px rgba(23,24,60,.08); --md-elev-4: 0 12px 28px rgba(23,24,60,.10), 0 28px 64px rgba(23,24,60,.10); --md-elev-5: 0 20px 48px rgba(23,24,60,.14), 0 40px 96px rgba(23,24,60,.12); /* ---- Shape --------------------------------------------------------- */ --md-radius-xs: 6px; --md-radius-sm: 10px; --md-radius-md: 14px; --md-radius-lg: 20px; --md-radius-xl: 28px; --md-radius-pill: 999px; /* ---- Typography --------------------------------------------------- */ --md-font-sans: "Inter", "Hind Siliguri", "Noto Sans Bengali", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --md-font-display: "Inter", "Hind Siliguri", sans-serif; --md-type-display-size: 2.25rem; --md-type-display-lh: 2.75rem; --md-type-display-weight: 700; --md-type-headline-size: 1.5rem; --md-type-headline-lh: 2rem; --md-type-headline-weight: 700; --md-type-title-size: 1.0625rem; --md-type-title-lh: 1.5rem; --md-type-title-weight: 600; --md-type-body-size: 0.9375rem; --md-type-body-lh: 1.4rem; --md-type-body-weight: 400; --md-type-label-size: 0.8125rem; --md-type-label-lh: 1.1rem; --md-type-label-weight: 600; /* ---- Spacing scale (4px base) ------------------------------------ */ --md-space-1: 4px; --md-space-2: 8px; --md-space-3: 12px; --md-space-4: 16px; --md-space-5: 20px; --md-space-6: 24px; --md-space-8: 32px; --md-space-10: 40px; --md-space-12: 48px; /* ---- Motion ----------------------------------------------------- */ --md-ease-standard: cubic-bezier(.2, 0, 0, 1); --md-ease-emphasized: cubic-bezier(.2, 0, 0, 1); --md-dur-short: 150ms; --md-dur-med: 240ms; /* ---- Layout metrics (match blithe) ---------------------------- */ --md-sidebar-w: 264px; --md-appbar-h: 68px; /* ---- State-layer opacities ----------------------------------- */ --md-state-hover: .08; --md-state-focus: .12; --md-state-press: .12; } /* ============================ DARK THEME ================================= */ body.dark { --md-primary: #b7aeff; --md-primary-hover: #c7c0ff; --md-primary-press: #d5d0ff; --md-on-primary: #1a0e63; --md-primary-container: #362d8f; --md-on-primary-container:#e8e5ff; --md-secondary: #4fd8c8; --md-on-secondary: #00332e; --md-secondary-container:#0c5b53; --md-on-secondary-container:#c9f4ee; --md-tertiary: #ff9083; --md-on-tertiary: #5a1a12; --md-success: #56d98c; --md-success-container: #12351f; --md-warning: #f2b13d; --md-warning-container: #3a2a05; --md-error: #ff6a5d; --md-error-container: #3f130f; --md-info: #7fb0ff; --md-info-container: #10233f; --md-background: #101018; --md-surface: #17171f; --md-surface-1: #1c1c25; --md-surface-2: #21212b; --md-surface-3: #262631; --md-surface-container: #1e1e28; --md-surface-variant: #2b2b38; --md-on-surface: #e9e9f1; --md-on-surface-medium: #bcbccb; --md-on-surface-muted: #8b8ca0; --md-outline: #3a3a48; --md-outline-variant: #2c2c39; --md-elev-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.32); --md-elev-2: 0 2px 6px rgba(0,0,0,.44), 0 4px 12px rgba(0,0,0,.34); --md-elev-3: 0 6px 16px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.34); --md-elev-4: 0 12px 28px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.38); --md-elev-5: 0 20px 48px rgba(0,0,0,.62), 0 6px 14px rgba(0,0,0,.42); --md-state-hover: .12; --md-state-focus: .16; --md-state-press: .18; }