/* Design tokens — ported in full from the Likwid website (tailwind.config.ts
 * and src/index.css) so the two properties share one visual language.
 *
 * Colours are stored as bare HSL triplets, exactly as the website stores them,
 * so `hsl(var(--primary))` behaves identically here and so Tailwind's `@theme`
 * can consume this file unchanged when the product phase arrives.
 *
 * Everything from the source system is present, including effects the waitlist
 * page does not use. Restraint is a choice about what a page reaches for, not
 * about what the system contains.
 */

:root {
  /* --- Base palette -------------------------------------------------- */
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;

  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;

  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;

  --primary: 263 70% 50%;
  --primary-foreground: 0 0% 100%;

  --secondary: 220 14% 96%;
  --secondary-foreground: 222 47% 11%;

  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;

  --accent: 263 70% 50%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 263 70% 50%;

  /* --- Brand accents -------------------------------------------------- */
  --electric-purple: 263 70% 50%;
  --electric-cyan: 170 100% 40%;
  --electric-blue: 217 91% 55%;
  --glow-purple: 263 70% 50%;
  --glow-cyan: 170 100% 40%;

  /* --- Gradients ------------------------------------------------------ */
  --gradient-primary: linear-gradient(
    135deg,
    hsl(263 70% 50%) 0%,
    hsl(217 91% 55%) 50%,
    hsl(170 100% 40%) 100%
  );
  --gradient-card: linear-gradient(
    135deg,
    hsl(220 14% 98% / 0.9) 0%,
    hsl(220 14% 96% / 0.8) 100%
  );
  --gradient-glow: radial-gradient(
    ellipse at center,
    hsl(263 70% 50% / 0.1) 0%,
    transparent 70%
  );

  /* --- Sidebar (product phase; unused here) --------------------------- */
  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 222 47% 11%;
  --sidebar-primary: 263 70% 50%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 220 14% 96%;
  --sidebar-accent-foreground: 222 47% 11%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 263 70% 50%;

  /* --- Radii ---------------------------------------------------------- */
  --radius: 0.75rem;
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* --- Typography ------------------------------------------------------
   * The website gets its scale from Tailwind's defaults. Without Tailwind we
   * state it explicitly: a 1.25 ratio, plus a fluid display size for the hero.
   */
  /* General Sans is what likwid.ai sets on headlines; Space Grotesk is loaded
     there but not used for h1. Matching the live site, not the stale config. */
  --font-display: "General Sans", -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;

  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;
  --text-display: clamp(2.75rem, 7.5vw, 5.75rem);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* --- Spacing (4px base) ---------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* --- Layout ---------------------------------------------------------- */
  --measure: 34rem;        /* ~65ch — comfortable reading width */
  --container: 68rem;
  --gutter: 1.5rem;

  /* --- Accent ------------------------------------------------------------
   * The Likwid rulebook (v2) allows one accent and bans rainbow gradients, so
   * the three-stop --gradient-primary above is kept for parity but not used.
   * This two-stop version matches the rulebook's count-up numbers:
   * from-primary to-electric-blue.
   */
  --gradient-accent: linear-gradient(
    100deg,
    hsl(var(--primary)) 0%,
    hsl(var(--electric-blue)) 100%
  );

  /* --- Motion ----------------------------------------------------------- */
  --ease-house: cubic-bezier(0.22, 1, 0.36, 1);   /* rulebook §7, used everywhere */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.3s;
  --duration-slow: 0.6s;
}

/* ======================================================================
 * Effect utilities, ported from the website's @layer utilities block.
 * ====================================================================== */

.text-gradient {
  background-image: var(--gradient-primary);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.bg-gradient-primary {
  background-image: var(--gradient-primary);
}

.bg-gradient-card {
  background-image: var(--gradient-card);
}

.glow-purple {
  box-shadow: 0 0 60px -15px hsl(var(--glow-purple) / 0.3);
}

.glow-cyan {
  box-shadow: 0 0 60px -15px hsl(var(--glow-cyan) / 0.3);
}

.glow-text {
  text-shadow: 0 0 30px hsl(var(--glow-purple) / 0.3);
}

.glass {
  backdrop-filter: blur(24px);
  background-color: hsl(var(--card) / 0.8);
  border: 1px solid hsl(var(--border));
  box-shadow: 0 1px 2px hsl(222 47% 11% / 0.05);
}

.glass-strong {
  backdrop-filter: blur(40px);
  background-color: hsl(var(--card) / 0.9);
  border: 1px solid hsl(var(--border));
  box-shadow: 0 4px 6px hsl(222 47% 11% / 0.07);
}

.grid-pattern {
  background-image:
    linear-gradient(to right, hsl(var(--border) / 0.8) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(var(--border) / 0.8) 1px, transparent 1px);
  background-size: 40px 40px;
}

.dot-pattern {
  background-image: radial-gradient(hsl(220 13% 85% / 0.6) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ======================================================================
 * Keyframes, ported in full.
 * ====================================================================== */

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

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  to { transform: translateX(100%); }
}

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

@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes marquee {
  from { transform: translateX(0%); }
  to   { transform: translateX(-100%); }
}

@keyframes marquee-reverse {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0%); }
}

@keyframes glow {
  from { box-shadow: 0 0 30px -10px hsl(var(--glow-purple) / 0.2); }
  to   { box-shadow: 0 0 50px -10px hsl(var(--glow-purple) / 0.3); }
}

.animate-fade-in       { animation: fade-in 0.6s var(--ease-out) forwards; }
.animate-fade-in-up    { animation: fade-in-up 0.8s var(--ease-out) forwards; }
.animate-slide-in-left { animation: slide-in-left 0.6s var(--ease-out) forwards; }
.animate-slide-in-right{ animation: slide-in-right 0.6s var(--ease-out) forwards; }
.animate-scale-in      { animation: scale-in 0.4s var(--ease-out) forwards; }
.animate-shimmer       { animation: shimmer 2s infinite; }
.animate-float         { animation: float 6s ease-in-out infinite; }
.animate-pulse-glow    { animation: pulse-glow 2s ease-in-out infinite; }
.animate-marquee       { animation: marquee 30s linear infinite; }
.animate-glow          { animation: glow 3s ease-in-out infinite alternate; }

/* --- Scrollbar, ported ------------------------------------------------- */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: hsl(var(--muted)); }
::-webkit-scrollbar-thumb {
  background: hsl(263 70% 58% / 0.5);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: hsl(263 70% 58% / 0.7); }

/* --- Motion preference -------------------------------------------------
 * Overrides every ported animation for people who ask for reduced motion.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}