/* ============================================================
   Design Tokens — Venus
   Voice-first dating app
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --color-primary: #7D3C98;
  --color-primary-light: rgb(125 60 152 / 12%);
  --color-primary-hover: #6C3483;

  /* ── Nature Accents ── */
  --color-moss: #4ECDC4;
  --color-moss-light: rgb(78 205 196 / 14%);
  --color-aurora: #8BA7D4;
  --color-aurora-light: rgb(139 167 212 / 12%);
  --color-sunset: #C084FC;
  --color-sunset-light: rgb(192 132 252 / 14%);
  --color-dusk: #BB8FCE;
  --color-dusk-light: rgb(187 143 206 / 12%);

  /* ── Surface ── */
  --color-bg: #F5F0FA;
  --color-bg-card: #FDFBFF;
  --color-bg-elevated: #fff;
  --color-bg-ambient: linear-gradient(
    160deg,
    rgb(125 60 152 / 6%) 0%,
    rgb(78 205 196 / 5%) 40%,
    rgb(139 167 212 / 5%) 70%,
    rgb(192 132 252 / 4%) 100%
  );

  /* ── Text ── */
  --color-text: #1A1525;
  --color-text-muted: #7A7488;
  --color-text-inverse: #FAF5FF;

  /* ── Borders ── */
  --color-border: #E0D6EB;
  --color-border-subtle: rgb(224 214 235 / 50%);

  /* ── Feedback ── */
  --color-error: #DC4040;
  --color-success: #10B981;
  --color-warning: #F59E0B;

  /* ── Gradients ── */
  --gradient-warm: linear-gradient(135deg, #7D3C98 0%, #BB8FCE 100%);
  --gradient-aurora: linear-gradient(135deg, #8BA7D4 0%, #BB8FCE 50%, #7D3C98 100%);
  --gradient-moss: linear-gradient(160deg, #4ECDC4 0%, #8BA7D4 100%);
  --gradient-sunset: linear-gradient(135deg, #C084FC 0%, #7D3C98 50%, #BB8FCE 100%);
  --gradient-glass: linear-gradient(
    135deg,
    rgb(255 255 255 / 60%) 0%,
    rgb(255 255 255 / 30%) 100%
  );

  /* ── Typography ── */
  --font-heading: 'Fraunces', georgia, serif;
  --font-body: 'Nunito Sans', -apple-system, blinkmacsystemfont, sans-serif;
  --font-display: 'Playfair Display', georgia, serif;
  --font-accent: 'Cormorant Garamond', georgia, serif;
  --font-ui: 'DM Sans', system-ui, sans-serif;

  /* fluid type scale */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem);
  --text-base: clamp(0.95rem, 0.88rem + 0.35vw, 1.08rem);
  --text-md: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  --text-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.6rem);
  --text-xl: clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem);
  --text-2xl: clamp(2rem, 1.6rem + 2vw, 3rem);
  --text-3xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);

  /* line-height */
  --leading-tight: 1.2;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;

  /* letter-spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.03em;

  /* ── Spacing ── */
  --space-xs: clamp(2px, 0.25vw, 4px);
  --space-sm: clamp(6px, 0.5vw, 8px);
  --space-md: clamp(12px, 1vw, 16px);
  --space-lg: clamp(20px, 1.5vw, 24px);
  --space-xl: clamp(28px, 2vw, 36px);
  --space-2xl: clamp(40px, 3vw, 52px);
  --space-3xl: clamp(56px, 4vw, 72px);
  --space-4xl: clamp(72px, 6vw, 96px);

  /* ── Radii (organic, generous) ── */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-card: 22px;
  --radius-lg: 28px;
  --radius-button: 999px;
  --radius-pill: 999px;
  --radius-blob: 30% 70% 70% 30% / 30% 30% 70% 70%;

  /* ── Shadows (purple-tinted) ── */
  --shadow-card:
    0 2px 8px rgb(125 60 152 / 6%),
    0 1px 3px rgb(125 60 152 / 4%);
  --shadow-elevated:
    0 8px 24px rgb(125 60 152 / 10%),
    0 2px 8px rgb(125 60 152 / 5%);
  --shadow-ambient:
    0 12px 40px rgb(125 60 152 / 8%),
    0 4px 12px rgb(125 60 152 / 4%);
  --shadow-glow: 0 0 20px rgb(125 60 152 / 15%);
  --shadow-inner: inset 0 2px 6px rgb(125 60 152 / 6%);

  /* ── Backdrop Blur ── */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 32px;

  /* ── Transitions & Easing ── */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-organic: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-breathe: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);

  /* transition shorthands */
  --transition-fast: 150ms var(--ease-organic);
  --transition-normal: 280ms var(--ease-organic);
  --transition-slow: 500ms var(--ease-breathe);
  --transition-spring: 400ms var(--ease-spring);

  /* ── Animation Durations ── */
  --duration-breathe: 4s;
  --duration-float: 6s;
  --duration-shimmer: 2.5s;
  --duration-morph: 8s;
  --duration-fade-in: 600ms;

  /* ── Z-index Scale ── */
  --z-base: 0;
  --z-elevated: 10;
  --z-overlay: 100;
  --z-modal: 1000;
}

/* ── Dark Mode ── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #9B59B6;
    --color-primary-light: rgb(155 89 182 / 14%);
    --color-primary-hover: #A96BC8;

    /* nature accents */
    --color-moss: #5BE0D8;
    --color-moss-light: rgb(91 224 216 / 12%);
    --color-aurora: #A0B8E0;
    --color-aurora-light: rgb(160 184 224 / 10%);
    --color-sunset: #D0A0FF;
    --color-sunset-light: rgb(208 160 255 / 10%);
    --color-dusk: #CDA4DB;
    --color-dusk-light: rgb(205 164 219 / 10%);

    /* surfaces */
    --color-bg: #0E0A14;
    --color-bg-card: #1A1426;
    --color-bg-elevated: #221A30;
    --color-bg-ambient: linear-gradient(
      160deg,
      rgb(155 89 182 / 6%) 0%,
      rgb(91 224 216 / 4%) 40%,
      rgb(160 184 224 / 4%) 70%,
      rgb(208 160 255 / 3%) 100%
    );

    /* text */
    --color-text: #EDE6F5;
    --color-text-muted: #9A8FA6;
    --color-text-inverse: #0E0A14;

    /* borders */
    --color-border: #2E2440;
    --color-border-subtle: rgb(46 36 64 / 50%);

    /* feedback */
    --color-error: #F06060;
    --color-success: #34D399;
    --color-warning: #FBBF24;

    /* gradients */
    --gradient-warm: linear-gradient(135deg, #9B59B6 0%, #CDA4DB 100%);
    --gradient-aurora: linear-gradient(135deg, #A0B8E0 0%, #CDA4DB 50%, #9B59B6 100%);
    --gradient-moss: linear-gradient(160deg, #5BE0D8 0%, #A0B8E0 100%);
    --gradient-sunset: linear-gradient(135deg, #D0A0FF 0%, #9B59B6 50%, #CDA4DB 100%);
    --gradient-glass: linear-gradient(
      135deg,
      rgb(255 255 255 / 8%) 0%,
      rgb(255 255 255 / 3%) 100%
    );

    /* shadows */
    --shadow-card:
      0 2px 8px rgb(0 0 0 / 20%),
      0 1px 3px rgb(0 0 0 / 15%);
    --shadow-elevated:
      0 8px 24px rgb(0 0 0 / 25%),
      0 2px 8px rgb(0 0 0 / 15%);
    --shadow-ambient:
      0 12px 40px rgb(0 0 0 / 30%),
      0 4px 12px rgb(0 0 0 / 15%);
    --shadow-glow: 0 0 20px rgb(155 89 182 / 20%);
    --shadow-inner: inset 0 2px 6px rgb(0 0 0 / 15%);
  }
}

/* ── Ambient Keyframes ── */
@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

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

  100% {
    background-position: 200% center;
  }
}

@keyframes morph {
  0%,
  100% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }

  25% {
    border-radius: 58% 42% 34% 66% / 63% 68% 32% 37%;
  }

  50% {
    border-radius: 50% 50% 34% 66% / 56% 32% 68% 44%;
  }

  75% {
    border-radius: 34% 66% 65% 35% / 37% 60% 40% 63%;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-scale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 12px rgb(125 60 152 / 10%);
  }

  50% {
    box-shadow: 0 0 24px rgb(125 60 152 / 22%);
  }
}

@keyframes rotate-slow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}