/* Marvel skin for CloudCLI UI
   - Intended to mimic the clean "Atlas" login aesthetic (soft grid background + frosted card + blue CTA)
   - Loaded after the app bundle so we can safely override utility classes.
*/

:root {
  --marvel-bg-0: #f6fbff;
  --marvel-bg-1: #eef6ff;
  --marvel-text: #0f172a;
  --marvel-muted: rgba(15, 23, 42, 0.62);
  --marvel-border: rgba(15, 23, 42, 0.12);
  --marvel-card: rgba(255, 255, 255, 0.78);
  --marvel-shadow: 0 28px 70px rgba(15, 23, 42, 0.18), 0 10px 22px rgba(15, 23, 42, 0.12);
  --marvel-primary: #2563eb;
  --marvel-primary-2: #1d4ed8;
  --marvel-ring: rgba(37, 99, 235, 0.28);
}

html,
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
}

code,
pre,
kbd,
samp {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
}

body {
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(37, 99, 235, 0.16), transparent 55%),
    radial-gradient(900px 700px at 10% 20%, rgba(59, 130, 246, 0.08), transparent 60%),
    linear-gradient(180deg, var(--marvel-bg-0), var(--marvel-bg-1));
  color: var(--marvel-text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.8;
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(closest-side at 50% 20%, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.2) 70%, transparent);
}

/* Typography tweaks */
.text-foreground {
  color: var(--marvel-text) !important;
}

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

/* Frosted card / container */
.bg-card {
  background: var(--marvel-card) !important;
  backdrop-filter: blur(14px) saturate(150%);
}

.border-border {
  border-color: var(--marvel-border) !important;
}

.shadow-lg,
.shadow-md {
  box-shadow: var(--marvel-shadow) !important;
}

.rounded-lg {
  border-radius: 18px !important;
}

/* Inputs */
input,
textarea,
select {
  outline: none;
}

.bg-background {
  background-color: rgba(255, 255, 255, 0.88) !important;
}

.focus\\:ring-blue-500:focus,
.focus\\:ring-2:focus {
  box-shadow: 0 0 0 4px var(--marvel-ring) !important;
}

.focus\\:border-transparent:focus {
  border-color: rgba(37, 99, 235, 0.35) !important;
}

/* Primary button (Atlas-like) */
.bg-blue-600 {
  background: linear-gradient(180deg, var(--marvel-primary), var(--marvel-primary-2)) !important;
  border-radius: 9999px !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.25) !important;
}

.hover\\:bg-blue-700:hover {
  filter: brightness(0.97) saturate(1.05);
}

.disabled\\:bg-blue-400:disabled {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.55), rgba(29, 78, 216, 0.45)) !important;
  box-shadow: none !important;
}

/* Make the login card spacing feel closer to Atlas */
.max-w-md {
  max-width: 560px !important;
}

/* Optional: soften harsh red blocks in light theme */
.bg-red-100 {
  background-color: rgba(239, 68, 68, 0.10) !important;
}

.border-red-300 {
  border-color: rgba(239, 68, 68, 0.25) !important;
}