/** * DigIndia Payroll – Shared theme (light + dark) * Softer, standard app colors – easy on eyes, professional look. * Use data-theme="dark" on for dark mode. */ :root { --dig-page-inline: 16px; /* Surfaces */ --dig-bg: #f0f2f5; --dig-surface: #ffffff; --dig-surface-elevated: #ffffff; --dig-input-bg: #f9fafb; /* Text */ --dig-text: #1f2937; --dig-text-muted: #6b7280; --dig-text-inverse: #ffffff; /* Primary (soft blue) */ --dig-primary: #2563eb; --dig-primary-hover: #1d4ed8; --dig-primary-muted: #dbeafe; /* Accent (soft emerald) */ --dig-accent: #059669; --dig-accent-hover: #047857; --dig-accent-muted: #d1fae5; /* UI */ --dig-border: #e5e7eb; --dig-border-focus: #2563eb; --dig-shadow: rgba(0, 0, 0, 0.06); --dig-shadow-strong: rgba(0, 0, 0, 0.1); /* States */ --dig-error: #dc2626; --dig-error-bg: #fef2f2; --dig-success: #059669; --dig-success-bg: #ecfdf5; /* Button gradient (subtle) */ --dig-btn-from: #2563eb; --dig-btn-to: #059669; --dig-btn-text: #ffffff; --dig-btn-shadow: rgba(37, 99, 235, 0.25); --dig-btn-shadow-hover: rgba(37, 99, 235, 0.35); /* Radius & motion */ --dig-radius: 14px; --dig-radius-sm: 10px; --dig-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Global mobile page gutter (match dashboard) */ --dig-page-gutter: 7px; } /* Dark theme */ [data-theme="dark"] { --dig-bg: #0f172a; --dig-surface: #1e293b; --dig-surface-elevated: #334155; --dig-input-bg: #1e293b; --dig-text: #f1f5f9; --dig-text-muted: #94a3b8; --dig-text-inverse: #0f172a; --dig-primary: #60a5fa; --dig-primary-hover: #93c5fd; --dig-primary-muted: #1e3a5f; --dig-accent: #34d399; --dig-accent-hover: #6ee7b7; --dig-accent-muted: #064e3b; --dig-border: #334155; --dig-border-focus: #60a5fa; --dig-shadow: rgba(0, 0, 0, 0.3); --dig-shadow-strong: rgba(0, 0, 0, 0.4); --dig-error: #f87171; --dig-error-bg: #450a0a; --dig-success: #34d399; --dig-success-bg: #064e3b; /* Dark: slightly brighter than light but not too bright */ --dig-btn-from: #2563eb; --dig-btn-to: #059669; --dig-btn-text: #ffffff; --dig-btn-shadow: rgba(96, 165, 250, 0.2); --dig-btn-shadow-hover: rgba(96, 165, 250, 0.3); } /* Theme toggle button (used on login & onboarding) */ .dig-theme-toggle { position: fixed; top: 16px; right: 16px; z-index: 1000; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; background: var(--dig-surface); color: var(--dig-text); box-shadow: 0 2px 12px var(--dig-shadow); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--dig-transition), color var(--dig-transition), box-shadow var(--dig-transition); } .dig-theme-toggle:hover { background: var(--dig-primary-muted); color: var(--dig-primary); box-shadow: 0 4px 16px var(--dig-shadow-strong); } .dig-theme-toggle:focus-visible { outline: 2px solid var(--dig-border-focus); outline-offset: 2px; } .dig-theme-toggle .dig-theme-icon-sun, .dig-theme-toggle .dig-theme-icon-moon { position: absolute; font-size: 1.2rem; transition: opacity var(--dig-transition), transform var(--dig-transition); } .dig-theme-toggle .dig-theme-icon-sun { opacity: 1; transform: rotate(0deg); } .dig-theme-toggle .dig-theme-icon-moon { opacity: 0; transform: rotate(-90deg); } [data-theme="dark"] .dig-theme-toggle .dig-theme-icon-sun { opacity: 0; transform: rotate(90deg); } [data-theme="dark"] .dig-theme-toggle .dig-theme-icon-moon { opacity: 1; transform: rotate(0deg); } /* Reduce accidental image drag in the app UI */ img { -webkit-user-drag: none; user-select: none; }