globals.css

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

@custom-variant dark (&:is(.dark *));

:root {
  /* Updated to Apple-inspired B2B SaaS color palette */
  --background: #f8fafc; /* Light gray for overall background */
  --foreground: #374151; /* Dark gray for primary text */
  --card: #ffffff; /* Pure white card background */
  --card-foreground: #374151; /* Dark gray card text */
  --primary: #374151; /* Primary button background */
  --primary-foreground: #ffffff; /* Primary button text */
  --secondary: #6366f1; /* Blue accent color */
  --secondary-foreground: #ffffff; /* Secondary text */
  --muted: #f8fafc; /* Muted background */
  --muted-foreground: #4b5563; /* Muted text */
  --accent: #6366f1; /* Blue accent for highlights */
  --accent-foreground: #ffffff; /* Accent text */
  --destructive: #be123c; /* Error messages */
  --destructive-foreground: #ffffff;
  --border: #e5e7eb; /* Light gray borders */
  --input: #ffffff; /* Input background */
  --ring: rgba(99, 102, 241, 0.5); /* Blue focus ring */
  --chart-1: #6366f1;
  --chart-2: #4b5563;
  --chart-3: #be123c;
  --chart-4: #0891b2;
  --chart-5: #ec4899;
  --radius: 0.5rem; /* Subtle corner rounding */
  --sidebar: #ffffff; /* Sidebar background */
  --sidebar-foreground: #374151; /* Sidebar text */
  --sidebar-primary: #f8fafc; /* Sidebar primary background */
  --sidebar-primary-foreground: #374151; /* Sidebar primary text */
  --sidebar-accent: #6366f1; /* Sidebar accent */
  --sidebar-accent-foreground: #ffffff; /* Sidebar accent text */
  --sidebar-border: #e5e7eb; /* Sidebar border */
  --sidebar-ring: rgba(99, 102, 241, 0.5); /* Sidebar focus ring */
  --font-geist: "Geist", sans-serif;
  --font-manrope: "Manrope", sans-serif;
}

.dark {
  --background: #1f2937;
  --foreground: #f8fafc;
  --card: #374151;
  --card-foreground: #f8fafc;
  --primary: #6366f1;
  --primary-foreground: #ffffff;
  --secondary: #374151;
  --secondary-foreground: #f8fafc;
  --muted: #4b5563;
  --muted-foreground: #9ca3af;
  --accent: #6366f1;
  --accent-foreground: #ffffff;
  --destructive: #be123c;
  --destructive-foreground: #ffffff;
  --border: #4b5563;
  --input: #374151;
  --ring: rgba(99, 102, 241, 0.5);
  --sidebar: #374151;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #4b5563;
  --sidebar-primary-foreground: #f8fafc;
  --sidebar-accent: #6366f1;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #4b5563;
  --sidebar-ring: rgba(99, 102, 241, 0.5);
}

@theme inline {
  /* Default to Manrope as app-wide sans font */
  --font-sans: var(--font-manrope);
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono:
    var(--font-geist-mono), ui-monospace, SFMono-Regular, "SF Mono", Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-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);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}

body,
html {
  height: 100%;
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

.copilotKitMessages {
  @apply pr-0!;
  div:empty {
    display: none;
  }
  .copilotKitMessage {
    &,
    & * {
      @apply font-sans text-sm! subpixel-antialiased leading-normal text-primary!;
    }
    &.copilotKitAssistantMessage {
      @apply rounded-bl-none! pl-3! mb-10! border-1 border-accent/50! bg-accent/10!;
      .copilotKitMessageControls {
        @apply mt-3! gap-x-2.5! opacity-100!;
        &,
        & * {
          @apply text-primary/50! transition-colors!;
        }
        & button:hover,
        & button:hover * {
          @apply text-accent!;
          transform: scale(1) !important;
        }
      }
    }
    &.copilotKitUserMessage {
      @apply rounded-br-none! pr-3! mb-4! border-1 border-primary/25! bg-primary/5!;
    }
  }
}