/* ============================================================
   theme.css -- Global design tokens (3 selectable themes)
   ============================================================
   This is the ONLY global CSS file in the project.
   It defines CSS variables only -- no element/class selectors
   -- so it can never conflict with page-scoped
   Component.razor.css files (CSS Isolation).

   Theme switching: set data-theme="blue" | "gold" | "lilac" on
   the <html> element (rendered server-side based on
   users.theme_preference, default 'blue'). All three blocks
   define the SAME variable names -- every Component.razor.css
   uses var(--...) and automatically follows the active theme.
   ============================================================ */

/* ---------- Theme: blue / navy (default) ---------- */
:root,
html[data-theme="blue"] {
  --bg-gradient: linear-gradient(145deg, #0a0f1f, #0d1a33, #08101f);

  --text-main: #e8f1ff;
  --text-dim: #a8d8ff;
  --text-faint: #8faad1;
  --text-error: #ff8a8a;

  --glass-bg: rgba(10, 20, 45, 0.55);
  --glass-bg-soft: rgba(10, 20, 45, 0.35);
  --glass-border: rgba(120, 180, 255, 0.35);
  --glass-blur: 18px;

  --accent-gradient: linear-gradient(135deg, #6bb6ff, #a8d8ff);
  --accent-glow: rgba(140, 200, 255, 0.8);
  --accent-glow-soft: rgba(120, 180, 255, 0.25);
  --accent-text-on-fill: #001a33;

  --grid-line: rgba(255, 255, 255, 0.035);
  --grid-size: 48px;
  --orb-1: rgba(120, 180, 255, 0.16);
  --orb-2: rgba(124, 108, 255, 0.14);
  --orb-3: rgba(120, 180, 255, 0.10);
  --scanline: rgba(120, 180, 255, 0.75);

  --color-success: linear-gradient(135deg, #6bffb0, #a8ffd8);
  --color-danger: linear-gradient(135deg, #ff8a8a, #ffc0c0);
  --color-warning: linear-gradient(135deg, #ffd76b, #ffe9a8);
  --color-info: var(--accent-gradient);
}

/* ---------- Theme: gold / coffee ---------- */
html[data-theme="gold"] {
  --bg-gradient: linear-gradient(145deg, #1a120a, #2b1c0f, #140d07);

  --text-main: #fff3e0;
  --text-dim: #ffd9a0;
  --text-faint: #d8b690;
  --text-error: #ff8a8a;

  --glass-bg: rgba(40, 25, 12, 0.55);
  --glass-bg-soft: rgba(40, 25, 12, 0.35);
  --glass-border: rgba(255, 195, 90, 0.35);
  --glass-blur: 18px;

  --accent-gradient: linear-gradient(135deg, #f0c869, #ffe2a8);
  --accent-glow: rgba(255, 210, 120, 0.8);
  --accent-glow-soft: rgba(255, 195, 90, 0.25);
  --accent-text-on-fill: #2b1c0f;

  --grid-line: rgba(255, 255, 255, 0.035);
  --grid-size: 48px;
  --orb-1: rgba(255, 195, 90, 0.16);
  --orb-2: rgba(214, 150, 70, 0.14);
  --orb-3: rgba(255, 195, 90, 0.10);
  --scanline: rgba(255, 195, 90, 0.75);

  --color-success: linear-gradient(135deg, #b6e08c, #ddf5b8);
  --color-danger: linear-gradient(135deg, #ff8a8a, #ffc0c0);
  --color-warning: linear-gradient(135deg, #ffd76b, #ffe9a8);
  --color-info: var(--accent-gradient);
}

/* ---------- Theme: lilac / purple ---------- */
html[data-theme="lilac"] {
  --bg-gradient: linear-gradient(145deg, #120a1f, #1d1233, #0d0818);

  --text-main: #f0e9ff;
  --text-dim: #d8c4ff;
  --text-faint: #b8a8d8;
  --text-error: #ff8a8a;

  --glass-bg: rgba(30, 18, 48, 0.55);
  --glass-bg-soft: rgba(30, 18, 48, 0.35);
  --glass-border: rgba(196, 150, 255, 0.35);
  --glass-blur: 18px;

  --accent-gradient: linear-gradient(135deg, #b48cff, #e2c8ff);
  --accent-glow: rgba(200, 160, 255, 0.8);
  --accent-glow-soft: rgba(196, 150, 255, 0.25);
  --accent-text-on-fill: #1f1233;

  --grid-line: rgba(255, 255, 255, 0.035);
  --grid-size: 48px;
  --orb-1: rgba(196, 150, 255, 0.18);
  --orb-2: rgba(150, 110, 255, 0.15);
  --orb-3: rgba(216, 180, 255, 0.12);
  --scanline: rgba(196, 150, 255, 0.8);

  --color-success: linear-gradient(135deg, #a8e0c8, #d8ffe8);
  --color-danger: linear-gradient(135deg, #ff8a8a, #ffc0c0);
  --color-warning: linear-gradient(135deg, #ffd76b, #ffe9a8);
  --color-info: var(--accent-gradient);
}

/* ---------- Theme: gray / slate (test) ---------- */
html[data-theme="gray"] {
  --bg-gradient: linear-gradient(145deg, #0f0f12, #1a1a20, #0c0c10);

  --text-main: #e8e8f0;
  --text-dim: #a0a0b8;
  --text-faint: #606070;
  --text-error: #ff8a8a;

  --glass-bg: rgba(30, 30, 40, 0.60);
  --glass-bg-soft: rgba(30, 30, 40, 0.38);
  --glass-border: rgba(160, 160, 200, 0.25);
  --glass-blur: 18px;

  --accent-gradient: linear-gradient(135deg, #9090b8, #c8c8e0);
  --accent-glow: rgba(180, 180, 220, 0.8);
  --accent-glow-soft: rgba(160, 160, 200, 0.20);
  --accent-text-on-fill: #0f0f18;

  --grid-line: rgba(255, 255, 255, 0.025);
  --grid-size: 48px;
  --orb-1: rgba(160, 160, 200, 0.12);
  --orb-2: rgba(120, 120, 170, 0.10);
  --orb-3: rgba(160, 160, 200, 0.08);
  --scanline: rgba(180, 180, 220, 0.6);

  --color-success: linear-gradient(135deg, #6bffb0, #a8ffd8);
  --color-danger: linear-gradient(135deg, #ff8a8a, #ffc0c0);
  --color-warning: linear-gradient(135deg, #ffd76b, #ffe9a8);
  --color-info: var(--accent-gradient);
}

/* ---------- shared (theme-independent) ---------- */
:root {
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 22px;

  /* solid status colors (theme-independent) — use for text/border/icon.
     (--color-success/danger/warning above are gradients, for fills only.) */
  --c-success: #4ade80;
  --c-warn: #fbbf24;
  --c-error: #f87171;
  --c-accent: #4fa8ff;

  /* soft tints + borders derived from the status colors, for chips/dots/badges */
  --c-success-soft: rgba(74, 222, 128, 0.12);
  --c-success-border: rgba(74, 222, 128, 0.35);
  --c-success-gradient: linear-gradient(135deg, #4ade80, #86efac);
  --c-warn-soft: rgba(251, 191, 36, 0.11);
  --c-warn-border: rgba(251, 191, 36, 0.30);
  --c-error-soft: rgba(248, 113, 113, 0.11);
  --c-error-border: rgba(248, 113, 113, 0.30);
  --c-accent-soft: rgba(79, 168, 255, 0.14);
  --c-accent-border: rgba(79, 168, 255, 0.45);
  --c-gray-soft: rgba(100, 120, 150, 0.15);
  --c-gray-border: rgba(100, 120, 150, 0.20);

  /* video-call surfaces (consultation room) */
  --video-bg: #020810;
  --room-panel: rgba(5, 13, 26, 0.92);
  --room-input-bg: rgba(14, 31, 58, 0.55);
  --room-overlay: rgba(0, 0, 0, 0.65);
  --c-purple-av: linear-gradient(135deg, #a78bfa, #c4b5fd);

  /* font preferences (set via <html data-font / data-font-size>) */
  --font-stack: 'Inter', 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-base: 16px;
}

/* ---------- font family (data-font on <html>) ---------- */
html[data-font="sans"]  { --font-stack: system-ui, -apple-system, 'Segoe UI', 'Inter', 'Vazirmatn', sans-serif; }
html[data-font="serif"] { --font-stack: Georgia, 'Times New Roman', 'Vazirmatn', serif; }
html[data-font="mono"]  { --font-stack: 'Cascadia Code', 'Consolas', 'Courier New', monospace; }

/* ---------- font size (data-font-size on <html>) ---------- */
html[data-font-size="small"]  { --font-base: 14px; }
html[data-font-size="medium"] { --font-base: 16px; }
html[data-font-size="large"]  { --font-base: 18px; }

/* apply the active font preferences globally */
html { font-size: var(--font-base); }
body { font-family: var(--font-stack); }

/* ---------- global avatar utility ---------- */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--glass-border);
  box-shadow: 0 0 10px var(--accent-glow-soft);
}