@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* ═══ Self-hosted fonts (no Google CDN) ═══ */

/* DM Sans — latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/dm-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans — latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/dm-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans italic — latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-sans-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans italic — latin */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-sans-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Space Mono 400 — latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/space-mono-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Mono 400 — latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/space-mono-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Space Mono 700 — latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/space-mono-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Mono 700 — latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/space-mono-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — change theme here only
   ═══════════════════════════════════════════════════════════════

   Semantic naming convention:
     canvas      — page body background
     surface     — cards, panels
     raised      — elevated / secondary surfaces (dropdowns, modals)
     ink         — primary text
     ink-soft    — secondary text
     ink-muted   — placeholder / helper text
     edge        — standard border
     edge-soft   — subtle divider
     edge-input  — form field border

   Status colours follow: {name}-tint (bg), {name} (text/icon), {name}-edge (border)
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Structure ── */
  --canvas:       #020617;   /* slate-950 */
  --surface:      #0f172a;   /* slate-900 */
  --raised:       #1e293b;   /* slate-800 */

  /* ── Typography ── */
  --ink:          #ffffff;
  --ink-soft:     #cbd5e1;   /* slate-300 */
  --ink-muted:    #94a3b8;   /* slate-400 */

  /* ── Borders ── */
  --edge:         #334155;   /* slate-700 */
  --edge-soft:    #1e293b;   /* slate-800 */
  --edge-input:   #475569;   /* slate-600 */

  /* ── Status: success ── */
  --success-tint:  #052e16cc; /* emerald-950 ~80% */
  --success:       #34d399;   /* emerald-400 */
  --success-edge:  #065f46;   /* emerald-800 */

  /* ── Status: error ── */
  --error-tint:   #450a0acc;  /* red-950 ~80% */
  --error:        #f87171;    /* red-400 */
  --error-edge:   #991b1b;    /* red-800 */

  /* ── Status: warning ── */
  --warning-tint: #451a03cc;  /* amber-950 ~80% */
  --warning:      #fbbf24;    /* amber-400 */
  --warning-edge: #92400e;    /* amber-800 */

  /* ── Status: info ── */
  --info-tint:    #172554cc;  /* blue-950 ~80% */
  --info:         #60a5fa;    /* blue-400 */
  --info-edge:    #1e40af;    /* blue-800 */
}

/* Expose tokens as Tailwind utility classes
   e.g. bg-canvas, text-ink, border-edge, bg-success-tint … */
@theme inline {
  --color-canvas:        var(--canvas);
  --color-surface:       var(--surface);
  --color-raised:        var(--raised);
  --color-ink:           var(--ink);
  --color-ink-soft:      var(--ink-soft);
  --color-ink-muted:     var(--ink-muted);
  --color-edge:          var(--edge);
  --color-edge-soft:     var(--edge-soft);
  --color-edge-input:    var(--edge-input);
  --color-success-tint:  var(--success-tint);
  --color-success:       var(--success);
  --color-success-edge:  var(--success-edge);
  --color-error-tint:    var(--error-tint);
  --color-error:         var(--error);
  --color-error-edge:    var(--error-edge);
  --color-warning-tint:  var(--warning-tint);
  --color-warning:       var(--warning);
  --color-warning-edge:  var(--warning-edge);
  --color-info-tint:     var(--info-tint);
  --color-info:          var(--info);
  --color-info-edge:     var(--info-edge);
}

/* ═══ Base layer ═══ */
@layer base {
  html {
    font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-canvas text-ink;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="url"],
  select,
  textarea {
    @apply border-edge-input rounded-lg text-ink placeholder:text-ink-muted text-sm bg-raised;
    @apply focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition-shadow;
  }

  input[type="file"] {
    @apply text-sm text-ink-muted;
  }
}

/* ═══ Component layer — shared patterns ═══ */
@layer components {

  /* ── Cards / panels ── */
  .card {
    @apply bg-surface rounded-2xl border border-edge;
  }

  /* ── Page header ── */
  .page-title   { @apply text-2xl font-bold text-ink; }
  .page-subtitle { @apply text-sm text-ink-muted; }

  /* ── Buttons ── */
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2
           px-4 py-2.5 bg-violet-600 hover:bg-violet-500 active:bg-violet-700
           text-white text-sm font-semibold rounded-xl transition-colors;
  }
  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2
           px-4 py-2.5 bg-surface border border-edge hover:bg-raised
           text-ink-soft text-sm font-medium rounded-xl transition-colors;
  }
  .btn-danger {
    @apply inline-flex items-center justify-center gap-2
           px-4 py-2.5 bg-surface border border-error-edge hover:bg-error-tint
           text-error text-sm font-medium rounded-xl transition-colors;
  }

  /* ── Status badges — base shared via multi-selector ── */
  .badge,
  .badge-trial,
  .badge-active,
  .badge-past-due,
  .badge-canceled,
  .badge-draft,
  .badge-processing,
  .badge-completed,
  .badge-failed {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold;
  }
  .badge-trial      { @apply bg-violet-950/50 text-violet-300; }
  .badge-active     { @apply bg-success-tint text-success; }
  .badge-past-due   { @apply bg-warning-tint text-warning; }
  .badge-canceled   { @apply bg-raised text-ink-muted; }
  .badge-draft      { @apply bg-raised text-ink-soft; }
  .badge-processing { @apply bg-info-tint text-info; }
  .badge-completed  { @apply bg-success-tint text-success; }
  .badge-failed     { @apply bg-error-tint text-error; }

  /* ── Flash / alert banners — base shared via multi-selector ── */
  .alert,
  .alert-success,
  .alert-error,
  .alert-warning,
  .alert-info {
    @apply rounded-xl border p-4 flex gap-3;
  }
  .alert-success { @apply bg-success-tint border-success-edge text-success; }
  .alert-error   { @apply bg-error-tint border-error-edge text-error; }
  .alert-warning { @apply bg-warning-tint border-warning-edge text-warning; }
  .alert-info    { @apply bg-info-tint border-info-edge text-info; }

  /* ── Forms ── */
  .form-label {
    @apply block text-sm font-semibold text-ink-soft mb-1.5;
  }
  .form-help {
    @apply text-xs text-ink-muted mt-1;
  }
  .form-section {
    @apply bg-surface rounded-2xl border border-edge;
  }
  .form-section-header {
    @apply px-6 py-4 border-b border-edge-soft;
  }

  /* ── Nav links — base shared via multi-selector ── */
  .nav-link,
  .nav-link-active {
    @apply flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium
           text-ink-soft hover:text-ink hover:bg-raised transition-colors;
  }
  .nav-link-active {
    @apply bg-violet-950/40 text-violet-300;
  }
}

/* ═══ Landing Page Animations ═══ */

/* Hero entrance animations */
.hero-pre-enter {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-pre-enter.hero-entered {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll reveal */
.reveal-up {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Animated gradient text */
.gradient-text-animated {
  background: linear-gradient(
    135deg,
    #a78bfa 0%,
    #818cf8 16%,
    #c084fc 32%,
    #a78bfa 48%,
    #818cf8 64%,
    #c084fc 80%,
    #a78bfa 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating orb animations */
.orb-float-1 {
  animation: orbFloat1 8s ease-in-out infinite;
}

.orb-float-2 {
  animation: orbFloat2 10s ease-in-out infinite;
}

.orb-float-3 {
  animation: orbFloat3 12s ease-in-out infinite;
}

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-40px, 30px) scale(1.08); }
  66% { transform: translate(25px, -35px) scale(0.92); }
}

@keyframes orbFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, 30px) scale(0.95); }
  66% { transform: translate(-30px, -25px) scale(1.05); }
}

/* Typewriter cursor */
.typewriter-cursor::after {
  content: '|';
  animation: cursorBlink 0.8s ease infinite;
  color: #a78bfa;
  font-weight: 300;
  margin-left: 2px;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Glowing pulse ring */
.glow-ring {
  position: relative;
}

.glow-ring::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(135deg, #a78bfa, #818cf8, #c084fc, #a78bfa);
  background-size: 300% 300%;
  animation: glowRotate 3s linear infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glow-ring:hover::before {
  opacity: 1;
}

@keyframes glowRotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Shimmer effect for badges */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* Noise grain overlay */
.noise-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* Tilt card base */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
}

[data-tilt] > * {
  transform: translateZ(20px);
}

/* Stagger animation helper */
.stagger-1 { transition-delay: 0ms; }
.stagger-2 { transition-delay: 100ms; }
.stagger-3 { transition-delay: 200ms; }
.stagger-4 { transition-delay: 300ms; }
.stagger-5 { transition-delay: 400ms; }
.stagger-6 { transition-delay: 500ms; }

/* Morphing blob shape */
.morph-blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: morphBlob 8s ease-in-out infinite;
}

@keyframes morphBlob {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%  { border-radius: 50% 60% 30% 60% / 30% 50% 70% 50%; }
  75%  { border-radius: 40% 30% 60% 50% / 60% 40% 30% 70%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* Particle canvas */
.particle-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Smooth scrollbar for hero visual mockup */
.hero-mockup-scroll {
  animation: mockupScroll 6s ease-in-out infinite;
}

@keyframes mockupScroll {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Counter glow */
.counter-glow {
  text-shadow: 0 0 30px rgba(167, 139, 250, 0.4);
}

/* CTA button pulse */
.cta-pulse {
  animation: ctaPulse 2.5s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4),
                0 10px 25px -3px rgba(139, 92, 246, 0.25);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(139, 92, 246, 0),
                0 10px 25px -3px rgba(139, 92, 246, 0.4);
  }
}

/* Grid line animation in hero bg */
.grid-lines {
  background-image:
    linear-gradient(rgba(139, 92, 246, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
  0% { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}

/* Pricing card hover lift */
.pricing-card {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pricing-card:hover {
  transform: translateY(-8px);
}

/* Smooth section transitions */
.section-fade {
  position: relative;
}

.section-fade::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, white);
  pointer-events: none;
}