@import '@meshkee/dashboard-core/styles/tokens.css';

/* Customer: Montserrat (EN) + Yekan Bakh (FA) via --font-ui stack */
:root {
  --font-en: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-fa: 'YekanBakh', Tahoma, sans-serif;
  --font-ui: var(--font-en), var(--font-fa);

  /* Neutral light surfaces (theme color stays on accents only) */
  --bg-gradient-start: #f4f5f7;
  --bg-gradient-mid: #eef0f3;
  --bg-gradient-end: #e8eaee;
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(148, 163, 184, 0.28);
  --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
  --surface: rgba(255, 255, 255, 0.82);
  --card-media-bg: #ffffff;
  --elevated-surface: rgba(255, 255, 255, 0.96);
  --icon-bg: color-mix(in srgb, var(--primary) 14%, #ffffff);
  --icon-bg-end: color-mix(in srgb, var(--primary) 8%, #f1f5f9);
}

/*
 * Dark mode: neutral dark gray backgrounds.
 * Brand/theme color (--primary) is for accents only — not page/card backgrounds.
 */
html[data-theme='dark'] {
  color-scheme: dark;

  --bg-gradient-start: #2a2d34;
  --bg-gradient-mid: #22252b;
  --bg-gradient-end: #1a1d23;

  --glass-bg: rgba(45, 49, 57, 0.9);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --modal-overlay-bg: rgba(0, 0, 0, 0.6);

  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border-color: rgba(255, 255, 255, 0.12);
  --surface: rgba(55, 59, 68, 0.95);
  --card-media-bg: #32363f;
  --elevated-surface: #3a3e48;

  --card-hover-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);

  /* Icon chip: clear primary tint on dark gray (not muddy page wash) */
  --icon-bg: rgba(var(--primary-rgb) / 0.22);
  --icon-bg-end: rgba(var(--primary-rgb) / 0.12);
}

html[data-theme='dark'] select {
  background-color: var(--surface);
  color: var(--text-primary);
  border-color: var(--border-color);
}

html[data-theme='dark']
  input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden']),
html[data-theme='dark'] textarea {
  background-color: var(--surface);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* Soft neutral aura — no theme-color wash on the page */
html[data-theme='dark'] body::before {
  background:
    radial-gradient(ellipse 520px 520px at 72% 18%, rgba(255, 255, 255, 0.04), transparent 72%),
    radial-gradient(ellipse 420px 420px at 22% 82%, rgba(255, 255, 255, 0.03), transparent 72%);
}
