/*
  Connector pink-purple "liquid glass" theme — drop-in CSS.
  Values verified against app.connector.cc's production CSS.
  See references/design-tokens.md in this skill for the full token list.
*/

:root {
  /* Brand */
  --color-primary: #8C52FF;
  --color-secondary: #FF5FB4;
  --color-accent: #FF5FB4;
  --gradient-brand: linear-gradient(135deg, #8C52FF 0%, #FF5FB4 100%);

  /* Dark purple ramp (page bg -> card bg -> inset bg, dark mode) */
  --color-dark-950: #0A0914;
  --color-dark-900: #15102B;
  --color-dark-800: #1D173C;
  --color-dark-700: #251E4D;
  --color-dark-600: #2E245E;
  --color-dark-500: #362B6F;
  --color-dark-400: #3E3180;
  --color-dark-300: #473892;
  --color-dark-200: #4F3EA3;
  --color-dark-100: #5D49BE;

  /* Light tints */
  --color-tint-50: #F9F8FD;
  --color-tint-100: #F3EDFF;
  --color-tint-200: #EEE9FF;
  --color-tint-300: #DCD7F6;
  --color-tint-400: #CB8BFF;
  --color-tint-500: #A668FF;

  /* Radius */
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows (purple-tinted elevation) */
  --shadow-soft:  0 2px 8px -2px rgba(24,24,27,0.06),  0 4px 16px -4px rgba(140,82,255,0.06);
  --shadow-float: 0 8px 24px -6px rgba(24,24,27,0.08), 0 16px 40px -12px rgba(140,82,255,0.10);
  --shadow-glass: 0 8px 32px -4px rgba(140,82,255,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-pop:   0 16px 48px -12px rgba(24,24,27,0.14), 0 24px 64px -16px rgba(140,82,255,0.18);

  /* Type */
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, sans-serif;
}

/* Base frosted-glass panel (cards, inputs, nav bars) */
.glass {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: linear-gradient(rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.55) 100%);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-glass);
}

/* Larger "hero" glass panel: ambient corner glows + diagonal specular sheen.
   Use for login screens, feature sections, marketing hero panels. */
.glass-hero {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background-color: rgba(255,255,255,0.65);
  background-image:
    radial-gradient(at 100% 100%, rgba(255,95,180,0.30) 0, transparent 60%),
    radial-gradient(at 80% 80%,   rgba(255,95,180,0.18) 0, transparent 50%),
    radial-gradient(at 20% 0%,    rgba(255,255,255,0.18) 0, transparent 50%),
    radial-gradient(at 70% 10%,   rgba(255,255,255,0.25) 0, transparent 40%),
    linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-pop);
}

/* Full-page/section ambient brand glow backgrounds */
.bg-brand-radial {
  background-image:
    radial-gradient(at 20% 20%, rgba(140,82,255,0.18) 0, transparent 50%),
    radial-gradient(at 80% 80%, rgba(255,95,180,0.18) 0, transparent 50%);
}
.bg-brand-gradient-soft {
  background-image: linear-gradient(135deg, rgba(140,82,255,0.12) 0%, rgba(255,95,180,0.12) 100%);
}

/* Gradient text */
.text-brand-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Primary CTA button */
.btn-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: #fff;
  background: var(--gradient-brand);
  border: none;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-float);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-gradient:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-pop);
}
.btn-gradient:active {
  transform: translateY(0);
}

/* Shadow utility classes, for elements not using .glass/.glass-hero directly */
.shadow-soft  { box-shadow: var(--shadow-soft); }
.shadow-float { box-shadow: var(--shadow-float); }
.shadow-glass { box-shadow: var(--shadow-glass); }
.shadow-pop   { box-shadow: var(--shadow-pop); }