@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;
}