/* RegisterMySite Links — agency product theme */
:root {
  --brand-50:  #ECFEFF;
  --brand-100: #CFFAFE;
  --brand-200: #A5F3FC;
  --brand-500: #0E8A8A;
  --brand-600: #0F766E;
  --brand-700: #115E59;
  --brand-800: #134E4A;
  --brand-900: #13403D;
  --brand-fg: var(--brand-600);
  --brand-bg-subtle: var(--brand-50);

  --neutral-0:   #FFFFFF;
  --neutral-50:  #F8FAFC;
  --neutral-100: #F1F5F9;
  --neutral-200: #E2E8F0;
  --neutral-300: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-500: #64748B;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1E293B;
  --neutral-900: #0F172A;
  --neutral-950: #020617;

  --bg-canvas:   #0B1220;
  --bg-surface:  #111827;
  --bg-elevated: #1A2332;
  --bg-hover:    rgba(255, 255, 255, 0.04);

  --text-primary: #F1F5F9;
  --text-muted:   #94A3B8;
  --text-subtle:  #64748B;

  --border-default: #1E293B;
  --border-strong:  #334155;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Menlo", monospace;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 12px 20px -6px rgba(0, 0, 0, 0.55);

  --ring-focus: 0 0 0 3px rgba(15, 118, 110, 0.28);
}

body {
  margin: 0;
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.43;
  -webkit-font-smoothing: antialiased;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #0B1220;
}

::-webkit-scrollbar-thumb {
  background: #1E293B;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
                              rgba(255, 255, 255, 0.08) 50%,
                              rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.animate-fadeIn {
  animation: fadeIn 0.25s ease-out;
}