@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (@media (prefers-color-scheme: dark));

:root {
  color-scheme: light;

  /* Rose/bone base */
  --background: oklch(0.986 0.008 345);
  --foreground: oklch(0.26 0.031 352);

  /* Crisp card elevation */
  --card: oklch(0.996 0.003 345);
  --card-foreground: oklch(0.26 0.031 352);

  --popover: oklch(0.996 0.003 345);
  --popover-foreground: oklch(0.26 0.031 352);

  /* Berry primary actions */
  --primary: oklch(0.50 0.160 9);
  --primary-foreground: oklch(0.996 0.003 345);

  /* Berry accent - links, tints, focus */
  --accent: oklch(0.50 0.160 9);
  --accent-foreground: oklch(0.996 0.003 345);

  /* Blush secondary surfaces */
  --secondary: oklch(0.958 0.021 348);
  --secondary-foreground: oklch(0.26 0.031 352);

  /* Rose tinted muted areas */
  --muted: oklch(0.945 0.026 348);
  --muted-foreground: oklch(0.45 0.031 350);

  /* Rose borders */
  --border: oklch(0.875 0.035 348);
  --input: oklch(0.84 0.045 348);
  --ring: oklch(0.50 0.160 9);

  --destructive: oklch(0.513 0.165 21);
  --destructive-foreground: oklch(0.996 0.003 345);

  --chart-1: oklch(0.50 0.160 9);
  --chart-2: oklch(0.905 0.040 348);
  --chart-3: oklch(0.386 0.097 12);
  --chart-4: oklch(0.473 0.098 153);
  --chart-5: oklch(0.479 0.134 261);

  --radius: 0.75rem;
  --sidebar: oklch(0.958 0.021 348);
  --sidebar-foreground: oklch(0.26 0.031 352);
  --sidebar-primary: oklch(0.50 0.160 9);
  --sidebar-primary-foreground: oklch(0.996 0.003 345);
  --sidebar-accent: oklch(0.905 0.040 348);
  --sidebar-accent-foreground: oklch(0.42 0.140 9);
  --sidebar-border: oklch(0.875 0.035 348);
  --sidebar-ring: oklch(0.50 0.160 9);
}

.dark {
  color-scheme: dark;

  /* Slate violet background - #2C2C2C with violet tint */
  --background: oklch(0.23 0.015 285);
  /* Light gray text - #E4E4E4 */
  --foreground: oklch(0.90 0.005 285);

  /* Slightly lighter slate for cards */
  --card: oklch(0.28 0.015 285);
  --card-foreground: oklch(0.90 0.005 285);

  --popover: oklch(0.28 0.015 285);
  --popover-foreground: oklch(0.90 0.005 285);

  /* Lavender buttons - #B39CD0 */
  --primary: oklch(0.70 0.10 295);
  --primary-foreground: oklch(0.23 0.015 285);

  /* Soft pink accent - #FFC1CC */
  --accent: oklch(0.85 0.08 5);
  --accent-foreground: oklch(0.23 0.015 285);

  /* Light cyan secondary - #A8DADC */
  --secondary: oklch(0.82 0.05 200);
  --secondary-foreground: oklch(0.23 0.015 285);

  /* Muted slate areas */
  --muted: oklch(0.33 0.015 285);
  --muted-foreground: oklch(0.72 0.01 285);

  /* Borders with more contrast */
  --border: oklch(0.42 0.02 285);
  /* Input borders - more visible against card backgrounds */
  --input: oklch(0.42 0.02 285);
  --ring: oklch(0.70 0.10 295);

  /* Warm destructive color */
  --destructive: oklch(0.60 0.22 27);
  --destructive-foreground: oklch(0.98 0.01 85);

  /* Chart colors using the accent palette */
  --chart-1: oklch(0.85 0.08 5);
  --chart-2: oklch(0.82 0.05 200);
  --chart-3: oklch(0.70 0.10 295);
  --chart-4: oklch(0.75 0.08 340);
  --chart-5: oklch(0.65 0.08 180);

  /* Sidebar slate */
  --sidebar: oklch(0.20 0.015 285);
  --sidebar-foreground: oklch(0.90 0.005 285);
  --sidebar-primary: oklch(0.70 0.10 295);
  --sidebar-primary-foreground: oklch(0.20 0.015 285);
  --sidebar-accent: oklch(0.28 0.015 285);
  --sidebar-accent-foreground: oklch(0.90 0.005 285);
  --sidebar-border: oklch(0.32 0.02 285);
  --sidebar-ring: oklch(0.70 0.10 295);
}

@theme inline {
  /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-hot-fuchsia: #ff0a54;
  --color-hot-fuchsia-100: #350010;
  --color-hot-fuchsia-200: #6a0020;
  --color-hot-fuchsia-300: #9f0030;
  --color-hot-fuchsia-400: #d40040;
  --color-hot-fuchsia-500: #ff0a54;
  --color-hot-fuchsia-600: #ff3b76;
  --color-hot-fuchsia-700: #ff6c98;
  --color-hot-fuchsia-800: #ff9dba;
  --color-hot-fuchsia-900: #ffcedd;
  --color-wild-strawberry: #ff477e;
  --color-wild-strawberry-100: #410014;
  --color-wild-strawberry-200: #830027;
  --color-wild-strawberry-300: #c4003b;
  --color-wild-strawberry-400: #ff0651;
  --color-wild-strawberry-500: #ff477e;
  --color-wild-strawberry-600: #ff6c98;
  --color-wild-strawberry-700: #ff91b2;
  --color-wild-strawberry-800: #ffb6cc;
  --color-wild-strawberry-900: #ffdae5;
  --color-bubblegum-pink: #ff5c8a;
  --color-bubblegum-pink-100: #450014;
  --color-bubblegum-pink-200: #8b0027;
  --color-bubblegum-pink-300: #d0003b;
  --color-bubblegum-pink-400: #ff1658;
  --color-bubblegum-pink-500: #ff5c8a;
  --color-bubblegum-pink-600: #ff7ca1;
  --color-bubblegum-pink-700: #ff9db9;
  --color-bubblegum-pink-800: #ffbed0;
  --color-bubblegum-pink-900: #ffdee8;
  --color-petal-rouge: #ff7096;
  --color-petal-rouge-100: #490014;
  --color-petal-rouge-200: #930027;
  --color-petal-rouge-300: #dc003b;
  --color-petal-rouge-400: #ff2760;
  --color-petal-rouge-500: #ff7096;
  --color-petal-rouge-600: #ff8dab;
  --color-petal-rouge-700: #ffa9c0;
  --color-petal-rouge-800: #ffc6d5;
  --color-petal-rouge-900: #ffe2ea;
  --color-bubblegum-tint: #ff85a1;
  --color-bubblegum-tint-100: #4e0012;
  --color-bubblegum-tint-200: #9b0024;
  --color-bubblegum-tint-300: #e90036;
  --color-bubblegum-tint-400: #ff3766;
  --color-bubblegum-tint-500: #ff85a1;
  --color-bubblegum-tint-600: #ff9db4;
  --color-bubblegum-tint-700: #ffb6c7;
  --color-bubblegum-tint-800: #ffced9;
  --color-bubblegum-tint-900: #ffe7ec;
  --color-cotton-candy: #ff99ac;
  --color-cotton-candy-100: #52000f;
  --color-cotton-candy-200: #a3001e;
  --color-cotton-candy-300: #f5002d;
  --color-cotton-candy-400: #ff4769;
  --color-cotton-candy-500: #ff99ac;
  --color-cotton-candy-600: #ffadbc;
  --color-cotton-candy-700: #ffc2cd;
  --color-cotton-candy-800: #ffd6de;
  --color-cotton-candy-900: #ffebee;
  --color-cherry-blossom: #fbb1bd;
  --color-cherry-blossom-100: #510411;
  --color-cherry-blossom-200: #a30922;
  --color-cherry-blossom-300: #f20f35;
  --color-cherry-blossom-400: #f76079;
  --color-cherry-blossom-500: #fbb1bd;
  --color-cherry-blossom-600: #fcc1cb;
  --color-cherry-blossom-700: #fdd0d8;
  --color-cherry-blossom-800: #fde0e5;
  --color-cherry-blossom-900: #feeff2;
  --color-pastel-pink: #f9bec7;
  --color-pastel-pink-100: #500712;
  --color-pastel-pink-200: #a10f25;
  --color-pastel-pink-300: #ea1d3c;
  --color-pastel-pink-400: #f16d81;
  --color-pastel-pink-500: #f9bec7;
  --color-pastel-pink-600: #facbd2;
  --color-pastel-pink-700: #fbd8dd;
  --color-pastel-pink-800: #fde5e8;
  --color-pastel-pink-900: #fef2f4;
  --color-cotton-rose: #f7cad0;
  --color-cotton-rose-100: #4e0c15;
  --color-cotton-rose-200: #9c1729;
  --color-cotton-rose-300: #e02e45;
  --color-cotton-rose-400: #eb7c8b;
  --color-cotton-rose-500: #f7cad0;
  --color-cotton-rose-600: #f9d4d9;
  --color-cotton-rose-700: #fadfe3;
  --color-cotton-rose-800: #fceaec;
  --color-cotton-rose-900: #fdf4f6;
  --color-soft-blush: #fae0e4;
  --color-soft-blush-100: #520d18;
  --color-soft-blush-200: #a31b2f;
  --color-soft-blush-300: #df3d55;
  --color-soft-blush-400: #ed8f9d;
  --color-soft-blush-500: #fae0e4;
  --color-soft-blush-600: #fbe6ea;
  --color-soft-blush-700: #fcedef;
  --color-soft-blush-800: #fdf3f4;
  --color-soft-blush-900: #fef9fa;
}

@utility content-visibility-auto {
	content-visibility: auto;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  html {
    scrollbar-gutter: stable;
  }

  body {
    @apply bg-background text-foreground;
  }
}

.arrow-animate {
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Shiki syntax highlighting styles */
.shiki-wrapper {
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  border: 1px solid var(--border);
}

.shiki-wrapper pre {
  margin: 0 !important;
  padding: 0 !important;
}

/* ========== Landing Page Animations ========== */

/* Animated gradient for headline text */
.text-gradient-animate {
  color: var(--primary);
}

.dark .text-gradient-animate {
  color: oklch(0.85 0.10 5);
}

/* Floating/breathing animation for hero elements */
@keyframes float {

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

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

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float 3s ease-in-out infinite;
  animation-delay: 0.5s;
}

/* Staggered fade-in animation */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
  opacity: 0;
}

.animate-delay-100 {
  animation-delay: 0.1s;
}

.animate-delay-200 {
  animation-delay: 0.2s;
}

.animate-delay-300 {
  animation-delay: 0.3s;
}

.animate-delay-400 {
  animation-delay: 0.4s;
}

.animate-delay-500 {
  animation-delay: 0.5s;
}

.animate-delay-600 {
  animation-delay: 0.6s;
}

/* Terminal cursor blink */
@keyframes cursor-blink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

.animate-cursor-blink {
  animation: cursor-blink 1s step-end infinite;
}

/* Button hover scale effect */
.btn-hover-lift {
  transition: all 0.2s ease-out;
}

.btn-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-hover-lift:active {
  transform: translateY(0);
}

/* Subtle pulse for feature dots */
@keyframes dot-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

.animate-dot-pulse {
  animation: dot-pulse 2s ease-in-out infinite;
}

.animate-dot-pulse-delayed-1 {
  animation: dot-pulse 2s ease-in-out infinite;
  animation-delay: 0.3s;
}

.animate-dot-pulse-delayed-2 {
  animation: dot-pulse 2s ease-in-out infinite;
  animation-delay: 0.6s;
}