/* Homepage colour scheme for RomM (Teixeira Games); overrides every Vuetify theme (saved per browser) */
:root, [class*="v-theme--"] {
  color-scheme: dark;
  --v-theme-background: 14,19,26 !important; --v-theme-on-background: 241,245,249 !important;
  --v-theme-surface: 24,32,43 !important; --v-theme-on-surface: 241,245,249 !important;
  --v-theme-surface-bright: 42,53,70 !important; --v-theme-surface-light: 32,42,55 !important;
  --v-theme-surface-variant: 203,213,225 !important; --v-theme-on-surface-variant: 24,32,43 !important;
  --v-theme-toplayer: 27,36,49 !important;
  --v-theme-primary: 255,100,0 !important; --v-theme-on-primary: 255,255,255 !important;
  --v-theme-primary-lighten: 255,138,61 !important; --v-theme-primary-darken: 217,83,0 !important; --v-theme-primary-darken-1: 217,83,0 !important;
  --v-theme-secondary: 255,138,61 !important; --v-theme-on-secondary: 255,255,255 !important;
  --v-theme-secondary-lighten: 255,214,184 !important; --v-theme-secondary-darken: 179,68,0 !important; --v-theme-secondary-darken-1: 179,68,0 !important;
  --v-theme-accent: 255,138,61 !important;
  --v-border-color: 255,255,255 !important; --v-border-opacity: .1 !important;
  --v-high-emphasis-opacity: .92 !important; --v-medium-emphasis-opacity: .65 !important;
}
html, body, .v-application { background: radial-gradient(ellipse at 88% 80%, rgba(255,100,0,.14), transparent 45%), radial-gradient(ellipse at 5% 12%, rgba(255,100,0,.05), transparent 30%), linear-gradient(135deg, #0e131a, #151b25) fixed !important; }
.v-card, .v-sheet:not(.v-app-bar) { border-color: rgba(255,255,255,.10) !important; }
.tx-name { margin-left: .6rem; font-size: 1.2rem; font-weight: 700; color: #f1f5f9; white-space: nowrap; }
@media (max-width: 700px) { .tx-name { display: none; } }
::selection { background: rgba(255,100,0,.35); }

/* RomM 5 'r-v2' design tokens -> Homepage colour scheme (both light and dark mode) */
html.r-v2, html.r-v2.r-v2-light, html.r-v2.r-v2-dark, .r-v2 {
  --r-color-auth-glass: #111821c4 !important;
  --r-color-avatar-gradient: linear-gradient(135deg, #feb98f, #ce743c) !important;
  --r-color-bg: #0e131a !important;
  --r-color-bg-elevated: #ffffff0b !important;
  --r-color-border: #ffffff12 !important;
  --r-color-border-strong: #ffffff26 !important;
  --r-color-brand-accent: #ff8a3d !important;
  --r-color-brand-accent-hover: #d95300 !important;
  --r-color-brand-primary: #ff6400 !important;
  --r-color-brand-primary-hover: #ff7a26 !important;
  --r-color-brand-primary-pressed: #d95300 !important;
  --r-color-brand-secondary: #ff8a3d !important;
  --r-color-brand-secondary-hover: #d95300 !important;
  --r-color-brand-secondary-pressed: #d95300 !important;
  --r-color-canvas-bg: #000 !important;
  --r-color-canvas-bg-deep: #0d1117 !important;
  --r-color-cover-placeholder: #2f2118 !important;
  --r-color-cover-placeholder-bright: #412f23 !important;
  --r-color-crt-ghost-cool: #3bd9ff !important;
  --r-color-crt-ghost-warm: #ff3b5c !important;
  --r-color-crt-glow: #7dffb4 !important;
  --r-color-danger: #ff5050 !important;
  --r-color-danger-fg: #f87171 !important;
  --r-color-fav: #ff4f6b !important;
  --r-color-fg: #fff !important;
  --r-color-fg-faint: #ffffff73 !important;
  --r-color-fg-faint-hard: #ffffff0d !important;
  --r-color-fg-heading: #fff !important;
  --r-color-fg-muted: #ffffff8c !important;
  --r-color-fg-secondary: #ffffffd4 !important;
  --r-color-focus: #ffffff73 !important;
  --r-color-info: #93c5fd !important;
  --r-color-overlay-border: #ffffff1f !important;
  --r-color-overlay-border-strong: #ffffff40 !important;
  --r-color-overlay-emphasis-bg: #fff !important;
  --r-color-overlay-emphasis-bg-hover: #e6e6e6 !important;
  --r-color-overlay-emphasis-fg: #111117 !important;
  --r-color-overlay-fg: #fffffff2 !important;
  --r-color-overlay-fg-muted: #ffffff73 !important;
  --r-color-overlay-fg-secondary: #ffffffd9 !important;
  --r-color-overlay-gold: gold !important;
  --r-color-overlay-scrim-soft: #0000008c !important;
  --r-color-overlay-scrim-strong: #000000c7 !important;
  --r-color-panel: #1c110bf7 !important;
  --r-color-panel-border: #ffffff1a !important;
  --r-color-provider-flashpoint: #f97316 !important;
  --r-color-provider-hasheous: #6b7280 !important;
  --r-color-provider-hltb: #22c55e !important;
  --r-color-provider-igdb: #f8975b !important;
  --r-color-provider-launchbox: #fd9554 !important;
  --r-color-provider-moby: #f59e0b !important;
  --r-color-provider-retroachievements: #ef4444 !important;
  --r-color-provider-screenscraper: #3b82f6 !important;
  --r-color-provider-steam: #66c0f4 !important;
  --r-color-provider-steamgriddb: #0ea5e9 !important;
  --r-color-romm-blue: #0070f3 !important;
  --r-color-romm-gold: gold !important;
  --r-color-romm-green: #3fb950 !important;
  --r-color-romm-red: #da3633 !important;
  --r-color-shimmer-sweep: #ffffff14 !important;
  --r-color-status-base-danger: #ef4444 !important;
  --r-color-status-base-info: #3b82f6 !important;
  --r-color-status-base-success: #22c55e !important;
  --r-color-status-base-warning: #eab308 !important;
  --r-color-success: #4ade80 !important;
  --r-color-surface: #ffffff12 !important;
  --r-color-surface-hover: #ffffff1f !important;
  --r-color-switch-knob-on: #111117 !important;
  --r-color-title-shadow: #00000080 !important;
  --r-color-toast-bg: #111821eb !important;
  --r-color-tooltip-bg: #111821f0 !important;
  --r-color-tooltip-border: #ffffff17 !important;
  --r-color-warning: #fbbf24 !important;
  --r-color-warning-fg: #facc15 !important;
}
/* login page: RomM's purple/peach shapes -> Homepage background + glass card */
.r-v2-auth__bg { background-image: none !important; background: radial-gradient(ellipse at 88% 80%, rgba(255,100,0,.16), transparent 45%), radial-gradient(ellipse at 5% 12%, rgba(255,100,0,.06), transparent 30%), linear-gradient(135deg, #0e131a, #151b25) !important; }
#app, body > div:first-child { background-color: #0e131a !important; }
.r-v2-auth .auth-card__inner, .r-v2-auth [class*="auth-card"] { background: rgba(24,32,43,.82) !important; backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255,255,255,.10) !important; border-radius: 16px !important; }
