/* ═══════════════════════════════════════════════════════
   MyClaw App Theme — Dark Premium Design System
   Standalone CSS for all custom utilities that Tailwind
   standalone binary may not compile from ERB files.
   ═══════════════════════════════════════════════════════ */

:root {
  --mc-bg: #09090b;
  --mc-bg-raised: #111113;
  --mc-bg-sidebar: #0c0c0e;
  --mc-fg: #fafafa;
  --mc-muted: #18181b;
  --mc-muted-fg: #71717a;
  --mc-muted-light: #a1a1aa;
  --mc-border: #27272a;
  --mc-border-subtle: #1e1e21;
  --mc-dark-zinc: #3f3f46;
  --mc-green: #22c55e;
  --mc-blue: #3b82f6;
  --mc-purple: #a78bfa;
  --mc-purple-light: #c4b5fd;
  --mc-amber: #f59e0b;
  --mc-red: #ef4444;
  --mc-pink: #ec4899;
  --mc-cyan: #06b6d4;
}

/* ===== BACKGROUND COLORS ===== */
.bg-mc-bg { background-color: var(--mc-bg); }
.bg-mc-bg-raised { background-color: var(--mc-bg-raised); }
.bg-mc-bg-sidebar { background-color: var(--mc-bg-sidebar); }
.bg-mc-fg { background-color: var(--mc-fg); }
.bg-mc-muted { background-color: var(--mc-muted); }
.bg-mc-muted-fg { background-color: var(--mc-muted-fg); }
.bg-mc-border { background-color: var(--mc-border); }
.bg-mc-border-subtle { background-color: var(--mc-border-subtle); }
.bg-mc-dark-zinc { background-color: var(--mc-dark-zinc); }
.bg-mc-green { background-color: var(--mc-green); }
.bg-mc-blue { background-color: var(--mc-blue); }
.bg-mc-purple { background-color: var(--mc-purple); }
.bg-mc-amber { background-color: var(--mc-amber); }
.bg-mc-red { background-color: var(--mc-red); }
.bg-mc-pink { background-color: var(--mc-pink); }

/* Background with opacity */
.bg-mc-green\/10 { background-color: rgb(34 197 94 / 0.1); }
.bg-mc-green\/80 { background-color: rgb(34 197 94 / 0.8); }
.bg-mc-blue\/10 { background-color: rgb(59 130 246 / 0.1); }
.bg-mc-blue\/20 { background-color: rgb(59 130 246 / 0.2); }
.bg-mc-blue\/80 { background-color: rgb(59 130 246 / 0.8); }
.bg-mc-purple\/10 { background-color: rgb(167 139 250 / 0.1); }
.bg-mc-purple\/20 { background-color: rgb(167 139 250 / 0.2); }
.bg-mc-purple\/25 { background-color: rgb(167 139 250 / 0.25); }
.bg-mc-amber\/10 { background-color: rgb(245 158 11 / 0.1); }
.bg-mc-red\/10 { background-color: rgb(239 68 68 / 0.1); }
.bg-mc-pink\/10 { background-color: rgb(236 72 153 / 0.1); }
.bg-mc-muted\/80 { background-color: rgb(24 24 27 / 0.8); }

/* Hover backgrounds */
.hover\:bg-mc-muted:hover { background-color: var(--mc-muted); }
.hover\:bg-mc-blue\/80:hover { background-color: rgb(59 130 246 / 0.8); }
.hover\:bg-mc-blue\/20:hover { background-color: rgb(59 130 246 / 0.2); }
.hover\:bg-mc-green\/80:hover { background-color: rgb(34 197 94 / 0.8); }
.hover\:bg-mc-bg:hover { background-color: var(--mc-bg); }
.hover\:bg-mc-bg-raised:hover { background-color: var(--mc-bg-raised); }

/* ===== TEXT COLORS ===== */
.text-mc-fg { color: var(--mc-fg); }
.text-mc-muted-fg { color: var(--mc-muted-fg); }
.text-mc-muted-light { color: var(--mc-muted-light); }
.text-mc-dark-zinc { color: var(--mc-dark-zinc); }
.text-mc-green { color: var(--mc-green); }
.text-mc-blue { color: var(--mc-blue); }
.text-mc-purple { color: var(--mc-purple); }
.text-mc-purple-light { color: var(--mc-purple-light); }
.text-mc-amber { color: var(--mc-amber); }
.text-mc-red { color: var(--mc-red); }
.text-mc-bg { color: var(--mc-bg); }

/* Hover text */
.hover\:text-mc-fg:hover { color: var(--mc-fg); }
.hover\:text-mc-muted-light:hover { color: var(--mc-muted-light); }
.hover\:text-mc-red:hover { color: var(--mc-red); }
.hover\:text-mc-blue\/80:hover { color: rgb(59 130 246 / 0.8); }
.hover\:text-mc-purple-light:hover { color: var(--mc-purple-light); }
.hover\:text-mc-purple:hover { color: var(--mc-purple); }

/* ===== BORDER COLORS ===== */
.border-mc-border { border-color: var(--mc-border); }
.border-mc-border-subtle { border-color: var(--mc-border-subtle); }
.border-mc-muted-fg { border-color: var(--mc-muted-fg); }
.border-mc-purple { border-color: var(--mc-purple); }
.border-mc-blue { border-color: var(--mc-blue); }
.border-mc-blue\/30 { border-color: rgb(59 130 246 / 0.3); }
.border-mc-purple\/20 { border-color: rgb(167 139 250 / 0.2); }

/* Hover borders */
.hover\:border-mc-border:hover { border-color: var(--mc-border); }
.hover\:border-mc-muted-fg:hover { border-color: var(--mc-muted-fg); }
.hover\:border-mc-purple:hover { border-color: var(--mc-purple); }

/* Focus borders */
.focus\:border-mc-purple:focus { border-color: var(--mc-purple); }
.focus\:border-mc-blue:focus { border-color: var(--mc-blue); }

/* ===== GRADIENT COLORS ===== */
.from-mc-purple { --tw-gradient-from: var(--mc-purple); }
.from-mc-blue { --tw-gradient-from: var(--mc-blue); }
.from-mc-green { --tw-gradient-from: var(--mc-green); }
.from-mc-amber { --tw-gradient-from: var(--mc-amber); }
.from-mc-pink { --tw-gradient-from: var(--mc-pink); }

.to-mc-blue { --tw-gradient-to: var(--mc-blue); }
.to-mc-purple { --tw-gradient-to: var(--mc-purple); }
.to-mc-green { --tw-gradient-to: var(--mc-green); }
.to-mc-red { --tw-gradient-to: var(--mc-red); }

/* Gradient with opacity */
.from-mc-amber\/10 { --tw-gradient-from: rgb(245 158 11 / 0.1); }
.from-mc-red\/5 { --tw-gradient-from: rgb(239 68 68 / 0.05); }
.from-mc-blue\/10 { --tw-gradient-from: rgb(59 130 246 / 0.1); }
.from-mc-blue\/\[0\.12\] { --tw-gradient-from: rgb(59 130 246 / 0.12); }
.from-mc-purple\/5 { --tw-gradient-from: rgb(167 139 250 / 0.05); }
.from-mc-purple\/10 { --tw-gradient-from: rgb(167 139 250 / 0.1); }
.from-mc-purple\/\[0\.12\] { --tw-gradient-from: rgb(167 139 250 / 0.12); }
.from-mc-green\/10 { --tw-gradient-from: rgb(34 197 94 / 0.1); }
.from-mc-green\/\[0\.12\] { --tw-gradient-from: rgb(34 197 94 / 0.12); }
.from-mc-pink\/10 { --tw-gradient-from: rgb(236 72 153 / 0.1); }
.from-mc-cyan\/\[0\.06\] { --tw-gradient-from: rgb(6 182 212 / 0.06); }
.from-mc-muted-fg\/\[0\.12\] { --tw-gradient-from: rgb(113 113 122 / 0.12); }

.to-mc-red\/5 { --tw-gradient-to: rgb(239 68 68 / 0.05); }
.to-mc-blue\/5 { --tw-gradient-to: rgb(59 130 246 / 0.05); }
.to-mc-blue\/\[0\.06\] { --tw-gradient-to: rgb(59 130 246 / 0.06); }
.to-mc-blue\/\[0\.08\] { --tw-gradient-to: rgb(59 130 246 / 0.08); }
.to-mc-purple\/5 { --tw-gradient-to: rgb(167 139 250 / 0.05); }
.to-mc-purple\/\[0\.06\] { --tw-gradient-to: rgb(167 139 250 / 0.06); }
.to-mc-green\/\[0\.06\] { --tw-gradient-to: rgb(34 197 94 / 0.06); }
.to-mc-red\/\[0\.06\] { --tw-gradient-to: rgb(239 68 68 / 0.06); }
.to-mc-pink\/\[0\.06\] { --tw-gradient-to: rgb(236 72 153 / 0.06); }
.to-mc-dark-zinc\/\[0\.06\] { --tw-gradient-to: rgb(63 63 70 / 0.06); }

/* Gradient backgrounds (full shorthand for common patterns) */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to)); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to)); }

/* ===== SHADOW COLORS ===== */
.shadow-mc-purple\/20 { --tw-shadow-color: rgb(167 139 250 / 0.2); }
.shadow-mc-purple\/25 { --tw-shadow-color: rgb(167 139 250 / 0.25); }
.hover\:shadow-mc-purple\/30:hover { --tw-shadow-color: rgb(167 139 250 / 0.3); }

/* ===== RING / OUTLINE ===== */
.ring-mc-purple { --tw-ring-color: var(--mc-purple); }
.focus\:ring-mc-purple:focus { --tw-ring-color: var(--mc-purple); }

/* ===== PLACEHOLDER ===== */
.placeholder-mc-dark-zinc::placeholder { color: var(--mc-dark-zinc); }

/* ===== CUSTOM FONT SIZES ===== */
.text-\[28px\] { font-size: 28px; }
.text-\[22px\] { font-size: 22px; }
.text-\[15px\] { font-size: 15px; }
.text-\[13px\] { font-size: 13px; }
.text-\[11px\] { font-size: 11px; }
.text-\[10px\] { font-size: 10px; }

/* ===== CUSTOM BORDER RADIUS ===== */
.rounded-\[20px\] { border-radius: 20px; }
.rounded-\[16px\] { border-radius: 16px; }
.rounded-\[14px\] { border-radius: 14px; }
.rounded-\[12px\] { border-radius: 12px; }
.rounded-\[10px\] { border-radius: 10px; }
.rounded-\[8px\] { border-radius: 8px; }

/* ===== CUSTOM SIZES ===== */
.h-\[72px\] { height: 72px; }
.w-\[72px\] { width: 72px; }
.min-w-\[20px\] { min-width: 20px; }

/* ===== CUSTOM TRACKING ===== */
.tracking-\[1px\] { letter-spacing: 1px; }

/* ===== CUSTOM ANIMATIONS ===== */
@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.animate-\[pulse_2s_infinite\] { animation: pulse-glow 2s infinite; }

/* ===== CUSTOM SHADOWS ===== */
.shadow-\[0_8px_32px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.hover\:shadow-\[0_8px_32px_rgba\(0\2c 0\2c 0\2c 0\.25\)\]:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.shadow-\[0_8px_24px_rgba\(167\2c 139\2c 250\2c 0\.3\)\] {
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.3);
}
.hover\:shadow-\[0_8px_24px_rgba\(167\2c 139\2c 250\2c 0\.3\)\]:hover {
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.3);
}

/* ===== BACKDROP BLUR (for mobile header) ===== */
.bg-mc-bg\/80 { background-color: rgb(9 9 11 / 0.8); }

/* ===== ADDITIONAL OPACITY VARIANTS ===== */
.bg-mc-green\/5 { background-color: rgb(34 197 94 / 0.05); }
.bg-mc-green\/20 { background-color: rgb(34 197 94 / 0.2); }
.bg-mc-green\/30 { background-color: rgb(34 197 94 / 0.3); }
.bg-mc-blue\/5 { background-color: rgb(59 130 246 / 0.05); }
.bg-mc-blue\/30 { background-color: rgb(59 130 246 / 0.3); }
.bg-mc-red\/5 { background-color: rgb(239 68 68 / 0.05); }
.bg-mc-amber\/\[0\.12\] { background-color: rgb(245 158 11 / 0.12); }

.border-mc-green\/20 { border-color: rgb(34 197 94 / 0.2); }
.border-mc-green\/30 { border-color: rgb(34 197 94 / 0.3); }
.border-mc-blue\/30 { border-color: rgb(59 130 246 / 0.3); }

.from-mc-amber\/10 { --tw-gradient-from: rgb(245 158 11 / 0.1); }
.from-mc-amber\/\[0\.12\] { --tw-gradient-from: rgb(245 158 11 / 0.12); }
.to-mc-red\/5 { --tw-gradient-to: rgb(239 68 68 / 0.05); }
.to-mc-blue\/5 { --tw-gradient-to: rgb(59 130 246 / 0.05); }

/* ===== MISC ===== */
.border-mc-red\/40 { border-color: rgb(239 68 68 / 0.4); }
.border-mc-red\/50 { border-color: rgb(239 68 68 / 0.5); }
.hover\:bg-mc-red\/8:hover { background-color: rgb(239 68 68 / 0.08); }
.bg-mc-red\/8 { background-color: rgb(239 68 68 / 0.08); }