beenvoice-web/src/styles/globals.css

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

@layer base {
  :root {
    --background: 0 0% 100%;
    /* #FFFFFF */
    --foreground: 240 10% 3.9%;
    /* #09090B */
    --card: 0 0% 100%;
    /* #FFFFFF */
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    /* #18181B */
    --primary-foreground: 0 0% 98%;
    /* #FAFAFA */
    --secondary: 240 4.8% 90%;
    /* #E4E4E7 (Darkened for contrast) */
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    /* #F4F4F5 */
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    /* #E4E4E7 */
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;
    --radius: 1rem;
    /* 16px Global Radius */
  }

  .dark {
    --background: 240 10% 3.9%;
    /* #09090B */
    --foreground: 0 0% 98%;
    /* #FAFAFA */
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 20%;
    /* #27272A */
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    /* #27272A */
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  --font-sans: var(--font-sans), sans-serif;
  --font-heading: var(--font-heading), serif;
  --font-mono: var(--font-geist-mono), monospace;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

@layer base {
  * {
    @apply border-border;
  }

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

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-heading;
  }
}

@layer utilities {
  .animate-blob {
    animation: blob 7s infinite;
  }

  .card-hover {
    transition: all 0.3s ease-out;
  }

  .card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -10px hsl(var(--foreground) / 0.1);
  }

  .button-hover {
    transition: all 0.2s ease-out;
  }

  .button-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px -4px hsl(var(--foreground) / 0.1);
  }
}

@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }

  33% {
    transform: translate(30px, -50px) scale(1.1);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }

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