/* EasyOps — TheEasy.ai Brand Styles (Light + Dark) */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,700;12..96,800&family=DM+Mono:wght@300;400;500&display=swap');

/* ── Light Theme (default) ───────────────────────────────────────────────── */
:root {
  --ink: #0f0e0c;
  --paper: #faf9f6;
  --warm: #f5f2eb;
  --card: #ffffff;
  --acc: #e8500a;
  --acc-dark: #c73f00;
  --mid: #6b6560;
  --rule: #e2ddd8;
  --grn: #15803d;
  --grn-bg: #f0fdf4;
  --blu: #1d4ed8;
  --blu-bg: #eff6ff;
  --red: #dc2626;
  --red-bg: #fee2e2;
  --input-bg: #ffffff;
  --header-bg: rgba(255, 255, 255, 0.95);
  --nav-bg: #ffffff;
}

/* ── Dark Theme ──────────────────────────────────────────────────────────── */
html.dark {
  --ink: #f5f3f0;
  --paper: #0f172a;
  --warm: #1e293b;
  --card: #1e293b;
  --acc: #ff6b2b;
  --acc-dark: #e8500a;
  --mid: #cbd5e1;
  --rule: #334155;
  --grn: #4ade80;
  --grn-bg: rgba(74, 222, 128, 0.15);
  --blu: #60a5fa;
  --blu-bg: rgba(96, 165, 250, 0.15);
  --red: #f87171;
  --red-bg: rgba(248, 113, 113, 0.15);
  --input-bg: #0f172a;
  --header-bg: rgba(15, 23, 42, 0.95);
  --nav-bg: #020617;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
html, body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

body {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  background: var(--paper) !important;
  color: var(--ink) !important;
  transition: background 0.3s, color 0.3s;
}

.safe-top { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* Smooth page transitions */
.view-enter { animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Voice button pulse */
.voice-active { animation: pulse 1.2s infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 80, 10, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(232, 80, 10, 0); }
}

.tap-target { min-height: 44px; min-width: 44px; }

/* ── Theme-aware overrides ───────────────────────────────────────────────── */

/* Backgrounds */
.bg-paper { background-color: var(--paper) !important; }
.bg-warm { background-color: var(--warm) !important; }
.bg-white { background-color: var(--card) !important; }

/* Text */
.text-ink { color: var(--ink) !important; }
.text-mid { color: var(--mid) !important; }
.text-brand-500 { color: var(--acc) !important; }
.placeholder-mid::placeholder { color: var(--mid) !important; }

/* Borders */
.border-rule { border-color: var(--rule) !important; }
.divide-rule > * + * { border-color: var(--rule) !important; }

/* Inputs */
.bg-warm input, .bg-warm textarea { background-color: var(--input-bg) !important; }

/* Header + Nav */
header.bg-white\/95 { background: var(--header-bg) !important; }
nav.bg-white { background: var(--nav-bg) !important; }

/* Brand accent buttons */
.bg-brand-500 { background-color: var(--acc) !important; }
.hover\:bg-brand-600:hover { background-color: var(--acc-dark) !important; }
.hover\:bg-brand-500:hover { background-color: var(--acc) !important; }
.focus\:border-brand-500:focus { border-color: var(--acc) !important; }
.hover\:border-brand-500:hover { border-color: var(--acc) !important; }

/* Status badges */
.status-working { background-color: #fdab3d; color: #000; }
.status-done { background-color: var(--grn); color: #fff; }
.status-stuck { background-color: var(--red); color: #fff; }
.status-default { background-color: var(--rule); color: var(--ink); }

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--warm) 25%, var(--rule) 50%, var(--warm) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Bottom nav */
.nav-active { color: var(--acc) !important; }
.nav-inactive { color: var(--mid) !important; }

/* Scrollbar */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* DM Mono */
.mono, .font-mono { font-family: 'DM Mono', monospace !important; }

/* ── High contrast in dark mode — ALL text white, no exceptions ───────────── */
html.dark,
html.dark body,
html.dark p,
html.dark span,
html.dark h1, html.dark h2, html.dark h3, html.dark h4,
html.dark label,
html.dark div,
html.dark button,
html.dark a,
html.dark li,
html.dark td, html.dark th,
html.dark .text-ink,
html.dark .text-mid,
html.dark .text-xs,
html.dark .text-sm,
html.dark .text-\[10px\],
html.dark .text-\[8px\],
html.dark .whitespace-pre-wrap,
html.dark textarea,
html.dark input[type="text"],
html.dark input[type="password"] {
  color: #ffffff !important;
}
html.dark textarea::placeholder,
html.dark input::placeholder {
  color: #94a3b8 !important;
}
/* Backgrounds */
html.dark .bg-white { background-color: #1e293b !important; border-color: var(--rule) !important; }
html.dark .bg-warm { background-color: #0f172a !important; }
/* Accent colors stay colored */
html.dark .text-brand-500 { color: var(--acc) !important; }
html.dark .text-red-600, html.dark .text-red-500 { color: #f87171 !important; }
html.dark .text-green-700 { color: #4ade80 !important; }
html.dark .text-amber-700, html.dark .text-amber-600 { color: #fbbf24 !important; }
html.dark .nav-active { color: var(--acc) !important; }
/* Status badges keep their own text color */
html.dark .status-done { color: #fff !important; }
html.dark .status-stuck { color: #fff !important; }
html.dark .status-working { color: #000 !important; }
html.dark .bg-brand-500 { color: #fff !important; }

/* ── Theme toggle button ─────────────────────────────────────────────────── */
.theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  background: var(--warm);
  border: 1px solid var(--rule);
  color: var(--mid);
}
.theme-toggle:hover {
  background: var(--rule);
  color: var(--ink);
}