/* ═══════════════════════════════════════════════════════════════
   VIHAR EXPORTS — THEME SYSTEM
   Black & White only · No blue · Dark / Light / System
   ═══════════════════════════════════════════════════════════════ */

/* ── DARK THEME (default) ─────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg: #000000;
  --section: #050505;
  --surface: #111111;
  --card: #111111;

  /* Text */
  --text: #ffffff;
  --heading: #ffffff;
  --muted: #aaaaaa;

  /* Borders */
  --border: rgba(255,255,255,0.08);
  --border-solid: #333333;

  /* Buttons */
  --btn-bg: #ffffff;
  --btn-text: #000000;
  --btn-outline-bg: #111111;
  --btn-outline-text: #ffffff;
  --btn-hover: #e5e5e5;

  /* Icons */
  --icon-bg: #1a1a1a;
  --icon-color: #ffffff;

  /* Forms */
  --input-bg: #111111;
  --input-text: #ffffff;
  --input-border: rgba(255,255,255,0.1);
  --input-placeholder: rgba(255,255,255,0.4);

  /* Accent */
  --accent: #ffffff;
  --accent-soft: rgba(255,255,255,0.08);

  /* Semantic colors (kept for status badges only) */
  --success: #22c55e;
  --error: #ef4444;
  --warning: #eab308;

  /* Shadows */
  --shadow: rgba(0,0,0,0.4);
  --shadow-sm: rgba(0,0,0,0.2);

  /* Overlay */
  --overlay: rgba(0,0,0,0.74);

  /* Nav */
  --nav-bg: rgba(10,10,15,0.95);
  --nav-mobile-bg: rgba(10,10,15,0.98);

  /* Footer */
  --footer-bg: #111111;

  /* Scrollbar */
  --scrollbar-thumb: rgba(255,255,255,0.2);
  --scrollbar-track: rgba(255,255,255,0.04);

  /* Tap highlight */
  --tap-highlight: rgba(255,255,255,0.08);

  /* Focus ring */
  --focus-ring: rgba(255,255,255,0.5);

  /* Semi-transparent text */
  --text-75: rgba(255,255,255,0.75);
  --text-65: rgba(255,255,255,0.65);
  --text-55: rgba(255,255,255,0.55);
  --text-45: rgba(255,255,255,0.45);
  --text-38: rgba(255,255,255,0.38);
  --text-82: rgba(255,255,255,0.82);
  --text-78: rgba(255,255,255,0.78);
  --text-72: rgba(255,255,255,0.72);
  --text-85: rgba(255,255,255,0.85);

  /* Semi-transparent backgrounds */
  --bg-02: rgba(255,255,255,0.02);
  --bg-035: rgba(255,255,255,0.035);
  --bg-04: rgba(255,255,255,0.04);
  --bg-045: rgba(255,255,255,0.045);
  --bg-05: rgba(255,255,255,0.05);
  --bg-06: rgba(255,255,255,0.06);
  --bg-07: rgba(255,255,255,0.07);
  --bg-08: rgba(255,255,255,0.08);
  --bg-12: rgba(255,255,255,0.12);

  /* Semi-transparent borders */
  --border-10: rgba(255,255,255,0.10);
  --border-14: rgba(255,255,255,0.14);
  --border-16: rgba(255,255,255,0.16);
  --border-18: rgba(255,255,255,0.18);
  --border-20: rgba(255,255,255,0.20);
  --border-25: rgba(255,255,255,0.25);
  --border-30: rgba(255,255,255,0.30);

  /* Hover backgrounds */
  --hover-bg: rgba(255,255,255,0.07);
  --hover-border: rgba(255,255,255,0.3);

  /* Card hover */
  --card-hover-border: rgba(255,255,255,0.15);

  /* Gradient text */
  --gradient-from: #ffffff;
  --gradient-to: #cccccc;

  /* Grid background */
  --grid-line: rgba(255,255,255,0.03);

  /* Product description fade */
  --desc-fade: linear-gradient(180deg, rgba(0,0,0,0), #000000 84%);

  /* Chat */
  --chat-bot-bg: rgba(255,255,255,0.06);
  --chat-status: #4ade80;

  /* Payment logos */
  --payment-bg: rgba(255,255,255,0.06);
  --payment-border: rgba(255,255,255,0.1);
  --payment-text: rgba(255,255,255,0.78);

  /* Code blocks */
  --code-bg: rgba(255,255,255,0.06);

  /* Info alert */
  --alert-info-bg: rgba(255,255,255,0.06);
  --alert-info-border: rgba(255,255,255,0.15);

  /* Unread row */
  --unread-bg: rgba(255,255,255,0.03);

  /* Toggle hamburger */
  --hamburger-bg: rgba(255,255,255,0.06);
  --hamburger-border: rgba(255,255,255,0.16);
  --hamburger-line: rgba(255,255,255,0.6);

  /* Dot pulse */
  --dot-bg: rgba(255,255,255,0.6);

  /* Hero glow */
  --hero-glow: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(255,255,255,0.03) 0%, transparent 70%);
}

/* ── LIGHT THEME ──────────────────────────────────────────── */
[data-theme="light"] {
  /* Backgrounds */
  --bg: #ffffff;
  --section: #f7f7f7;
  --surface: #f0f0f0;
  --card: #ffffff;

  /* Text */
  --text: #000000;
  --heading: #000000;
  --muted: #666666;

  /* Borders */
  --border: rgba(0,0,0,0.1);
  --border-solid: #dddddd;

  /* Buttons */
  --btn-bg: #000000;
  --btn-text: #ffffff;
  --btn-outline-bg: #ffffff;
  --btn-outline-text: #000000;
  --btn-hover: #333333;

  /* Icons */
  --icon-bg: #f0f0f0;
  --icon-color: #000000;

  /* Forms */
  --input-bg: #ffffff;
  --input-text: #000000;
  --input-border: rgba(0,0,0,0.15);
  --input-placeholder: rgba(0,0,0,0.4);

  /* Accent */
  --accent: #000000;
  --accent-soft: rgba(0,0,0,0.06);

  /* Semantic colors (kept for status badges only) */
  --success: #16a34a;
  --error: #dc2626;
  --warning: #ca8a04;

  /* Shadows */
  --shadow: rgba(0,0,0,0.1);
  --shadow-sm: rgba(0,0,0,0.05);

  /* Overlay */
  --overlay: rgba(0,0,0,0.5);

  /* Nav */
  --nav-bg: rgba(255,255,255,0.95);
  --nav-mobile-bg: rgba(255,255,255,0.98);

  /* Footer */
  --footer-bg: #f5f5f5;

  /* Scrollbar */
  --scrollbar-thumb: rgba(0,0,0,0.2);
  --scrollbar-track: rgba(0,0,0,0.04);

  /* Tap highlight */
  --tap-highlight: rgba(0,0,0,0.06);

  /* Focus ring */
  --focus-ring: rgba(0,0,0,0.3);

  /* Semi-transparent text */
  --text-75: rgba(0,0,0,0.75);
  --text-65: rgba(0,0,0,0.65);
  --text-55: rgba(0,0,0,0.55);
  --text-45: rgba(0,0,0,0.45);
  --text-38: rgba(0,0,0,0.38);
  --text-82: rgba(0,0,0,0.82);
  --text-78: rgba(0,0,0,0.78);
  --text-72: rgba(0,0,0,0.72);
  --text-85: rgba(0,0,0,0.85);

  /* Semi-transparent backgrounds */
  --bg-02: rgba(0,0,0,0.02);
  --bg-035: rgba(0,0,0,0.035);
  --bg-04: rgba(0,0,0,0.04);
  --bg-045: rgba(0,0,0,0.045);
  --bg-05: rgba(0,0,0,0.05);
  --bg-06: rgba(0,0,0,0.06);
  --bg-07: rgba(0,0,0,0.07);
  --bg-08: rgba(0,0,0,0.08);
  --bg-12: rgba(0,0,0,0.12);

  /* Semi-transparent borders */
  --border-10: rgba(0,0,0,0.10);
  --border-14: rgba(0,0,0,0.14);
  --border-16: rgba(0,0,0,0.16);
  --border-18: rgba(0,0,0,0.18);
  --border-20: rgba(0,0,0,0.20);
  --border-25: rgba(0,0,0,0.25);
  --border-30: rgba(0,0,0,0.30);

  /* Hover backgrounds */
  --hover-bg: rgba(0,0,0,0.06);
  --hover-border: rgba(0,0,0,0.2);

  /* Card hover */
  --card-hover-border: rgba(0,0,0,0.15);

  /* Gradient text */
  --gradient-from: #000000;
  --gradient-to: #555555;

  /* Grid background */
  --grid-line: rgba(0,0,0,0.04);

  /* Product description fade */
  --desc-fade: linear-gradient(180deg, rgba(255,255,255,0), #ffffff 84%);

  /* Chat */
  --chat-bot-bg: rgba(0,0,0,0.05);
  --chat-status: #16a34a;

  /* Payment logos */
  --payment-bg: rgba(0,0,0,0.05);
  --payment-border: rgba(0,0,0,0.1);
  --payment-text: rgba(0,0,0,0.7);

  /* Code blocks */
  --code-bg: rgba(0,0,0,0.05);

  /* Info alert */
  --alert-info-bg: rgba(0,0,0,0.05);
  --alert-info-border: rgba(0,0,0,0.12);

  /* Unread row */
  --unread-bg: rgba(0,0,0,0.03);

  /* Toggle hamburger */
  --hamburger-bg: rgba(0,0,0,0.06);
  --hamburger-border: rgba(0,0,0,0.12);
  --hamburger-line: rgba(0,0,0,0.6);

  /* Dot pulse */
  --dot-bg: rgba(0,0,0,0.4);

  /* Hero glow */
  --hero-glow: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(0,0,0,0.03) 0%, transparent 70%);
}

/* ── BASE THEME APPLICATION ───────────────────────────────── */
body {
  background-color: var(--bg);
  color: var(--text);
}

section {
  background-color: var(--section);
}

.card {
  background-color: var(--card);
  border-color: var(--border);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading);
}

.text-muted {
  color: var(--muted) !important;
}

/* Buttons */
.btn-primary {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-bg);
}

.btn-outline {
  background-color: var(--btn-outline-bg);
  color: var(--btn-outline-text);
  border-color: var(--border);
}

/* Icons */
.icon-circle {
  background-color: var(--icon-bg);
  color: var(--icon-color);
}

/* Forms */
input, textarea, select {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--input-border);
}

input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder);
}

/* Remove any blue color references - force inherit */
.text-primary, .bg-primary, .text-blue, .bg-blue,
.text-info, .bg-info {
  color: var(--text) !important;
  background-color: transparent !important;
}