/* EVstore web — shared design tokens (mirrors core/ui/theme in the Android app). Dark is the default. */
:root {
  color-scheme: dark;
  --ev-bg: #0A0F0D;
  --ev-bg-2: #101714;
  --ev-surface: #131C18;
  --ev-surface-2: #182420;
  --ev-glass: rgba(16, 23, 20, 0.70);
  --ev-text: #FFFFFF;
  --ev-text-muted: #9CA3AF;
  --ev-text-dim: #6B7280;
  --ev-primary: #34D399;
  --ev-primary-dark: #064E3B;
  --ev-grad-start: #34D399;
  --ev-grad-end: #065F46;
  --ev-green-deep: #1E6147;
  --ev-yellow: #FACC15;
  --ev-blue: #51A2FF;
  --ev-warning: #FFB900;
  --ev-outline: rgba(52, 211, 153, 0.25);
  --ev-divider: rgba(255, 255, 255, 0.10);
  --ev-inactive: rgba(156, 163, 175, 0.30);
  --ev-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --ev-glow: 0 0 80px rgba(52, 211, 153, 0.25);

  --ev-r-sm: 13px;
  --ev-r-md: 16px;
  --ev-r-ml: 20px;
  --ev-r-lg: 24px;
  --ev-r-pill: 999px;

  --ev-font-latin: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ev-font-arabic: "Cairo", "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ev-font: var(--ev-font-latin);

  --ev-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --ev-bg: #F8FAF9;
  --ev-bg-2: #FFFFFF;
  --ev-surface: #FFFFFF;
  --ev-surface-2: #F1F5F3;
  --ev-glass: rgba(255, 255, 255, 0.85);
  --ev-text: #0C0C0C;
  --ev-text-muted: #6B7280;
  --ev-text-dim: #9CA3AF;
  --ev-primary: #10B981;
  --ev-primary-dark: #065F46;
  --ev-grad-start: #10B981;
  --ev-grad-end: #059669;
  --ev-outline: #D9F3EB;
  --ev-divider: rgba(0, 0, 0, 0.10);
  --ev-inactive: rgba(107, 114, 128, 0.30);
  --ev-shadow: 0 20px 60px rgba(6, 95, 70, 0.12);
  --ev-glow: 0 0 80px rgba(16, 185, 129, 0.18);
}

html.font-cairo { --ev-font: var(--ev-font-arabic); }

html { font-family: var(--ev-font); background: var(--ev-bg); color: var(--ev-text); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: inherit; background: var(--ev-bg); color: var(--ev-text); }
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; display: block; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ev-primary); outline-offset: 3px; }

/* Hide i18n-driven text until the dictionary is applied to avoid a flash of raw keys. */
html:not(.i18n-ready) [data-i18n], html:not(.i18n-ready) [data-i18n-html] { visibility: hidden; }