@import url('https://fonts.googleapis.com/css2?family=Akt:wght@100..900&family=Archivo+Black&display=swap'); /* Smooth theme cross-fade. The .theme-transitioning class is added to only while a theme flip is happening (~350ms) — outside that window the transition is off so hovers/clicks stay snappy. */ html.theme-transitioning, html.theme-transitioning *:not(#theme-fade-overlay), html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease, fill 0.6s ease, stroke 0.6s ease, box-shadow 0.6s ease !important; } :root { --bg: #050505; --bg-surface: #0f0f0f; --bg-elevated: #1a1a1a; --text: #ffffff; --text-muted: #8a8a8a; --accent: #ff6b00; --accent-hover:#ff8533; --border: #262626; --white: #ffffff; --black: #000000; --btn-primary-bg: var(--accent); --btn-primary-text: var(--black); --btn-primary-hover: var(--accent-hover); --badge-bg: #1a1a1a; --badge-text: #a3a3a3; --badge-accent-text: var(--black); --success: #2ecc71; --warning: #f39c12; --danger: #e74c3c; --font-display: 'Archivo Black', 'Akt', sans-serif; --font-body: 'Akt', sans-serif; --radius-sharp: 0; --radius-soft: 2px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); } :root[data-theme="light"] { /* Customer palette */ --bg: #f4f4f4; --bg-surface: #ffffff; --bg-elevated: #ffffff; --text: #111111; --text-muted: #666666; --accent: #cc3d24; --accent-hover:#a6301b; --border: #cfcfcf; --btn-primary-bg: #111111; --btn-primary-text: #ffffff; --btn-primary-hover: #000000; --badge-bg: #111111; --badge-text: #ffffff; --badge-accent-text: #ffffff; /* Admin palette */ --a-bg: #f0f2f4; --a-surface: #ffffff; --a-surface-low: #f5f7f9; --a-surface-hi: #e6eaef; --a-border: #cdd2d9; --a-border-soft: #dde2e8; --a-text: #1c2128; --a-text-mute: #57606a; --a-text-dim: #9ba3ac; --a-primary: #ff6b00; --a-primary-soft: #d45700; --a-on-primary: #ffffff; --a-success: #1a7f37; --a-warning: #9a6700; --a-critical: #cf222e; --a-info: #0969da; }