@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+Devanagari:wght@300;400;500;600;700&display=swap');
:root {
  --font-sans: 'Inter', 'Noto Sans Devanagari', system-ui, -apple-system, sans-serif;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-light: #eff6ff;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --soft: #f8fafc;
  --card: #ffffff;
  --bg2: #ffffff;
  --header-bg: rgba(255, 255, 255, 0.85);
  --bg3: #f1f5f9;
  --border: #e2e8f0;
  --r: #ef4444;
  --red: #ef4444;
  --green: #10b981;
  --g: #10b981;
  --leaf: #10b981;
  --leaf-dark: #0b5c3a;
  --mint: #f0fdf4;
  --instant: #ff4757;
  --cyan: #0ea5b7;
  --a: #f59e0b;
  --gold: #f59e0b;
  --leaf-light: #a7f3d0;
  --instant-light: #fecaca;
  --pink: #ec4899;
  --orange: #f97316;
  --purple: #7c3aed;
  --indigo: #1a237e;
  --amber: #f59e0b;
  --saffron: #FF9933;
  --error-bg: #fee2e2;
  --text: #0f172a;
  --input: #ffffff;

  /* Chatbot aliases */
  --chatbot-primary: #2563eb;
  --chatbot-primary-dark: #1d4ed8;
  --text-on-chatbot: #ffffff;
  --text-on-danger: #ffffff;
  --danger: #ef4444;
  --card-bg: #ffffff;
  --border-color: #e2e8f0;
  --soft-bg: #f8fafc;
  --text-muted: #94a3b8;
  --success: #10b981;
  --info: #3b82f6;
  --warning: #f59e0b;

  /* Footer dark-theme aliases (also useable for any dark-on-dark text) */
  --text-on-dark: #ffffff;
  --muted-on-dark: #b9c2d0;
  --border-on-dark: rgba(255, 255, 255, 0.12);

  /* Responsive / utility aliases */
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --scrollbar-thumb: rgba(0, 0, 0, 0.15);
  --canvas-bg: #fafafa;
  --bg: #ffffff;

  /* Extended shadows & radii used in home.css */
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --radius-xl: 28px;
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.02);
  --shadow-premium: 0 22px 40px rgba(37, 99, 235, 0.08);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --blue: #60a5fa;
  --blue-dark: #3b82f6;
  --blue-light: #1e293b;
  --ink: #f1f5f9;
  --muted: #94a3b8;
  --line: #334155;
  --soft: #0f172a;
  --card: #1e293b;
  --header-bg: rgba(15, 23, 42, 0.85);
  --bg2: #1e293b;
  --bg3: #0f172a;
  --border: #334155;
  --r: #f87171;
  --red: #f87171;
  --green: #34d399;
  --g: #34d399;
  --leaf: #34d399;
  --leaf-dark: #059669;
  --mint: #064e3b;
  --instant: #f87171;
  --cyan: #22d3ee;
  --a: #fbbf24;
  --gold: #fbbf24;
  --leaf-light: #064e3b;
  --instant-light: #7f1d1d;
  --pink: #f472b6;
  --orange: #fb923c;
  --purple: #a78bfa;
  --indigo: #818cf8;
  --amber: #fbbf24;
  --saffron: #fbbf24;
  --error-bg: rgba(239, 68, 68, 0.15);
  --text: #f1f5f9;
  --input: #1e293b;

  /* Chatbot dark aliases */
  --chatbot-primary: #60a5fa;
  --chatbot-primary-dark: #3b82f6;
  --text-on-chatbot: #ffffff;
  --text-on-danger: #ffffff;
  --danger: #f87171;
  --card-bg: #1e293b;
  --border-color: #334155;
  --soft-bg: #0f172a;
  --text-muted: #94a3b8;

  /* Footer dark aliases (on dark-bg remain light text) */
  --text-on-dark: #ffffff;
  --muted-on-dark: #94a3b8;
  --border-on-dark: rgba(255, 255, 255, 0.1);

  /* Responsive / utility dark aliases */
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --scrollbar-thumb: rgba(255, 255, 255, 0.2);
  --canvas-bg: #1e293b;
  --bg: #0f172a;

  /* Extended shadows & radii */
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  --radius-xl: 28px;
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.5);
  --shadow-premium: 0 22px 40px rgba(96, 165, 250, 0.1);
  --font-sans: 'Inter', 'Noto Sans Devanagari', system-ui, -apple-system, sans-serif;
}

body, html { font-family: var(--font-sans); }

/* ====== SHARED DARK MODE TOGGLE BUTTON ====== */
.dark-mode-btn {
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; color: var(--muted); padding: 8px;
  border-radius: 8px; transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  display: inline-flex; align-items: center; gap: 6px;
}
.dark-mode-btn:hover { color: var(--p,#f97316); background: rgba(249,115,22,0.08); }
.dark-mode-btn:focus-visible { outline: 2px solid var(--p,#f97316); outline-offset: 2px; }

/* ====== SHARED BUTTON VARIANTS ====== */
.btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}
.btn-primary:hover {
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
  transform: translateY(-2px);
}
.btn-secondary {
  background: var(--blue-light, #eff6ff);
  border: 1px solid var(--line, #e2e8f0);
  color: var(--blue, #2563eb);
}
/* Toggle Switch */
input[type="checkbox"]:checked + span:first-of-type { background: var(--pri, #6d28d9) !important; }
input[type="checkbox"]:checked + span:first-of-type + span { transform: translateX(22px) !important; }
@import url('./dark-overrides.css');


/* [hidden] attribute must win over component display rules (phantom profile/role blocks, ghost rows) */
[hidden]{display:none !important;}
