/* ReviewHub design tokens — light/dark palettes as CSS variables.
   Mirrors the pal() function from the design file. */

:root, :root[data-theme="light"] {
  --bg: #F6F8FB;
  --panel: #FFFFFF;
  --panel2: #F5F7FA;
  --raised: #FFFFFF;
  --border: #E7EAF0;
  --line: #EEF1F6;
  --text: #0F172A;
  --sub: #64748B;
  --faint: #94A3B8;
  --accent: #2563EB;
  --acc-soft: rgba(37, 99, 235, 0.08);
  --success: #16A34A;
  --suc-soft: rgba(22, 163, 74, 0.10);
  --warn: #D97706;
  --warn-soft: rgba(217, 119, 6, 0.10);
  --danger: #DC2626;
  --dang-soft: rgba(220, 38, 38, 0.09);
  --purple: #7C3AED;
  --purple-soft: rgba(124, 58, 237, 0.09);
  --sidebar: #FFFFFF;
  --side-border: #EAEDF2;
  --chip: #F1F5F9;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 30px -20px rgba(16, 24, 40, .22);
  --glass: rgba(255, 255, 255, 0.72);
  --raised-tint: #F7F9FC;
  --stripe: #F1F4F9;
  --hover-bg: #F5F7FA;
  --ghost-bg: #FFFFFF;
}

:root[data-theme="dark"] {
  --bg: #0A0E17;
  --panel: #111827;
  --panel2: #0F1622;
  --raised: #161F2E;
  --border: #1F2937;
  --line: #1B2536;
  --text: #EAF0F8;
  --sub: #93A2B8;
  --faint: #5C6B82;
  --accent: #2563EB;
  --acc-soft: rgba(59, 130, 246, 0.16);
  --success: #34D399;
  --suc-soft: rgba(52, 211, 153, 0.14);
  --warn: #FBBF24;
  --warn-soft: rgba(251, 191, 36, 0.14);
  --danger: #F87171;
  --dang-soft: rgba(248, 113, 113, 0.14);
  --purple: #A78BFA;
  --purple-soft: rgba(167, 139, 250, 0.14);
  --sidebar: #0B0F1A;
  --side-border: #161F2E;
  --chip: #1A2333;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 40px -22px rgba(0, 0, 0, .8);
  --glass: rgba(11, 15, 26, 0.72);
  --raised-tint: #0F1622;
  --stripe: #0F1723;
  --hover-bg: #141C29;
  --ghost-bg: #151E2C;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: #1D4ED8; }
input, select, textarea, button { font-family: inherit; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.32);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.5);
  background-clip: padding-box;
}

@keyframes omFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes omPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes omDrawer { from { transform: translateX(24px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
@keyframes omToast { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes omBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes omShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes omSpin { to { transform: rotate(360deg); } }
.om-anim { animation: omFade .34s cubic-bezier(.22, 1, .36, 1); }

/* icon defaults */
[data-lucide] { display: inline-flex; flex-shrink: 0; vertical-align: middle; }
svg.lucide { display: inline-flex; flex-shrink: 0; vertical-align: middle; }

/* Icons inside a control are decorative and must never own the click: lucide swaps the
   <svg> node, and a swap between mousedown and mouseup would otherwise eat the click.
   Letting it through means the whole control is clickable, icon and label alike. */
button [data-lucide], button svg.lucide,
a [data-lucide], a svg.lucide,
label [data-lucide], label svg.lucide,
[role="button"] [data-lucide], [role="button"] svg.lucide { pointer-events: none; }

/* Alpine cloak — hide until Alpine takes over so drawer/cmdk don't flash on load */
[x-cloak] { display: none !important; }

/* x-show strips the inline display property when revealing an element, so any
   flex row it toggles must declare display here rather than in a style attribute. */
.rh-flex-row { display: flex; }

/* Sidebar width is driven by <html data-nav> so the persisted state is correct on
   first paint; Alpine only flips the attribute. */
.rh-sidebar { width: 256px; transition: width .22s cubic-bezier(.4, 0, .2, 1); }
[data-nav="collapsed"] .rh-sidebar { width: 78px; }

/* Hide default number spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Font tokens */
.font-jakarta { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', 'Menlo', monospace; }

/* Notification bell attention pulse — added via JS on new-notification event.
   Runs on the button (parent of [data-notif-count]) so the icon & badge move as one. */
@keyframes rhBellPulse {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
  40%  { transform: scale(1.14); box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.rh-notif-pulse { animation: rhBellPulse 1.2s ease-out 2; }

/* Inline validation error below a form field. Rendered by drawer forms
   with @error(...) in Blade — small red text that hugs the input. */
.rh-field-err {
  color: var(--danger);
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 5px;
  display: block;
}