beenvoice-web/src/styles/globals.css

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

@layer base {
  :root {
    --app-font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
    --app-font-heading: var(--font-playfair), ui-serif, Georgia, serif;

    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 90%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --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%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;
    --radius: 1rem;
    --dashboard-mobile-header-height: 4rem;
    --dashboard-mobile-header-gap: 0.75rem;
  }

  :root[data-color-mode="dark"],
  :root.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --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%;
    --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%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-color-mode="light"]) {
      --background: 240 10% 3.9%;
      --foreground: 0 0% 98%;
      --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%;
      --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%;
      --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(--app-font-sans), ui-sans-serif, system-ui, sans-serif;
  --font-heading: var(--app-font-heading), ui-serif, Georgia, serif;
  --font-mono: var(--font-geist-mono), ui-monospace, 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 {
  .dashboard-mobile-header {
    min-height: var(--dashboard-mobile-header-height);
  }

  .dashboard-content-shell {
    padding: 1rem;
    padding-top: calc(
      var(--dashboard-mobile-header-height) + var(--dashboard-mobile-header-gap)
    );
  }

  @media (min-width: 768px) {
    .dashboard-content-shell {
      padding: 1.25rem;
      padding-top: 1.25rem;
    }
  }

  .platform-header-content {
    padding: 1.25rem;
  }

  [data-slot="card"],
  [data-slot="dialog-content"],
  [data-slot="alert-dialog-content"],
  [data-slot="popover-content"] {
    border-radius: var(--radius-lg);
  }

  [data-slot="card-header"] {
    padding: 1rem 1rem 0.75rem;
  }

  [data-slot="card-content"] {
    padding-inline: 1rem;
    padding-bottom: 1rem;
  }

  [data-slot="card-footer"] {
    padding: 1rem;
  }

  .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);
  }
}