/* Uningá ID - Vercel / Apple Inspired Design System CSS */

:root {
  --font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --bg-app: #ffffff;
  --bg-sidebar: #fafafa;
  --text-primary: #171717; /* Dark charcoal */
  --text-secondary: #666666; /* Vercel gray text */
  --border-primary: #eaeaea; /* Vercel light border */
  --border-focus: #000000;
  
  --color-blue: #0f4d91;
  --color-orange: #ff5621;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-app);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* Subtle border and shadow details */
.vercel-border {
  border: 1px solid var(--border-primary);
}

.vercel-shadow {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.03);
}

.vercel-card {
  background: #ffffff;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vercel-card:hover {
  border-color: #b5b5b5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* Google login button outline hover */
.sso-button {
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  border: 1px solid var(--border-primary);
}

.sso-button:hover {
  border-color: #000000;
  background-color: #fafafa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Keyframe Animations for simulated SSO verification loader */
@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 0.4; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.pulse-circle {
  animation: pulse-ring 2s infinite ease-in-out;
}

/* Modal and Toggles Vercel-style */
.vercel-toggle {
  position: relative;
  display: inline-flex;
  height: 20px;
  width: 36px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 9999px;
  border: 2px solid transparent;
  background-color: #eaeaea;
  transition: background-color 0.2s ease;
}

.vercel-toggle.active {
  background-color: #000000;
}

.vercel-toggle-dot {
  pointer-events: none;
  display: inline-block;
  height: 16px;
  width: 16px;
  transform: translateX(0);
  border-radius: 9999px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.vercel-toggle.active .vercel-toggle-dot {
  transform: translateX(16px);
}

/* Clean input focus state */
.vercel-input:focus {
  outline: none;
  border-color: #000000 !important;
  box-shadow: 0 0 0 1px #000000 !important;
}

/* Geometric Gradient mesh background on Split screen (Vercel-style) */
.sso-mesh {
  background: radial-gradient(at 0% 0%, rgba(15, 77, 145, 0.15) 0px, transparent 50%),
              radial-gradient(at 100% 0%, rgba(255, 86, 33, 0.15) 0px, transparent 50%),
              radial-gradient(at 50% 100%, rgba(15, 77, 145, 0.08) 0px, transparent 50%);
  background-color: #fafafa;
}

/* Grid lines overlay for developer feel */
.grid-lines {
  background-size: 40px 40px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
}