@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 */
  }

  :root[data-interface-theme="shadcn"] {
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --radius: 0.5rem;
  }

  :root[data-interface-theme="beenvoice"] {
    --secondary: 240 4.8% 90%;
    --secondary-foreground: 240 5.9% 10%;
    --radius: 1rem;
  }

  :root[data-interface-theme="minimal"] {
    --background: 0 0% 100%;
    --card: 0 0% 100%;
    --popover: 0 0% 100%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 96.5%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 97%;
    --accent: 240 4.8% 96%;
    --accent-foreground: 240 5.9% 10%;
  }

  :root[data-interface-theme="editorial"] {
    --background: 36 33% 98%;
    --card: 36 33% 99%;
    --popover: 36 33% 99%;
    --primary: 346.8 77.2% 49.8%;
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 30 18% 91%;
    --secondary-foreground: 24 10% 10%;
    --muted: 30 20% 94%;
    --accent: 346.8 77.2% 49.8%;
    --accent-foreground: 355.7 100% 97.3%;
    --border: 30 15% 86%;
    --input: 30 15% 86%;
  }

  :root[data-body-font="brand"],
  :root[data-body-font="inter"] {
    --app-font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  }

  :root[data-body-font="platform"] {
    --app-font-sans:
      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      sans-serif;
  }

  :root[data-body-font="serif"] {
    --app-font-sans:
      ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  }

  :root[data-heading-font="brand"],
  :root[data-heading-font="serif"] {
    --app-font-heading: var(--font-playfair), ui-serif, Georgia, serif;
  }

  :root[data-heading-font="platform"] {
    --app-font-heading:
      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      sans-serif;
  }

  :root[data-heading-font="inter"] {
    --app-font-heading: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  }

  :root[data-font="brand"]:not([data-body-font]) {
    --app-font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
    --app-font-heading: var(--font-playfair), ui-serif, Georgia, serif;
  }

  :root[data-font="platform"]:not([data-body-font]) {
    --app-font-sans:
      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      sans-serif;
    --app-font-heading:
      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      sans-serif;
  }

  :root[data-font="inter"]:not([data-body-font]) {
    --app-font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
    --app-font-heading: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  }

  :root[data-font="serif"]:not([data-body-font]) {
    --app-font-sans:
      ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --app-font-heading: var(--font-playfair), ui-serif, Georgia, serif;
  }

  :root[data-radius="none"] {
    --radius: 0rem;
  }

  :root[data-radius="sm"] {
    --radius: 0.25rem;
  }

  :root[data-radius="md"] {
    --radius: 0.5rem;
  }

  :root[data-radius="lg"] {
    --radius: 0.75rem;
  }

  :root[data-radius="xl"] {
    --radius: 1rem;
  }

  :root[data-color-mode="dark"],
  :root.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%;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-color-mode="light"]) {
      --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%;
    }
  }

  :root[data-color-theme="slate"] {
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
  }

  :root[data-color-theme="blue"] {
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --accent: 217.2 91.2% 59.8%;
    --accent-foreground: 210 40% 98%;
  }

  :root[data-color-theme="green"] {
    --primary: 142.1 76.2% 36.3%;
    --primary-foreground: 355.7 100% 97.3%;
    --accent: 142.1 70.6% 45.3%;
    --accent-foreground: 355.7 100% 97.3%;
  }

  :root[data-color-theme="rose"] {
    --primary: 346.8 77.2% 49.8%;
    --primary-foreground: 355.7 100% 97.3%;
    --accent: 346.8 77.2% 49.8%;
    --accent-foreground: 355.7 100% 97.3%;
  }

  :root[data-color-theme="orange"] {
    --primary: 24.6 95% 53.1%;
    --primary-foreground: 60 9.1% 97.8%;
    --accent: 20.5 90.2% 48.2%;
    --accent-foreground: 60 9.1% 97.8%;
  }

  :root[data-color-theme="custom"] {
    --primary: var(--custom-primary, 142.1 76.2% 36.3%);
    --primary-foreground: 355.7 100% 97.3%;
    --accent: var(--custom-primary, 142.1 76.2% 36.3%);
    --accent-foreground: 355.7 100% 97.3%;
  }

  :root[data-color-mode="dark"][data-color-theme="slate"],
  :root.dark[data-color-theme="slate"] {
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-color-mode="light"])[data-color-theme="slate"] {
      --primary: 0 0% 98%;
      --primary-foreground: 240 5.9% 10%;
      --accent: 240 3.7% 15.9%;
      --accent-foreground: 0 0% 98%;
    }
  }
}

@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 {
  :root[data-interface-theme="shadcn"] .brand-background,
  :root[data-interface-theme="minimal"] .brand-background {
    display: none;
  }

  :root[data-interface-theme="minimal"] [data-slot="card"] {
    background-color: transparent;
    border-color: transparent;
    border-radius: 0;
    border-top-color: hsl(var(--border));
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
  }

  :root[data-interface-theme="minimal"] [data-slot="card"] + [data-slot="card"],
  :root[data-interface-theme="minimal"] .form-section + .form-section {
    border-top: 1px solid hsl(var(--border));
    padding-top: 1rem;
  }

  :root[data-interface-theme="minimal"] [data-slot="card-header"],
  :root[data-interface-theme="minimal"] [data-slot="card-content"],
  :root[data-interface-theme="minimal"] [data-slot="card-footer"] {
    padding-inline: 0;
  }

  :root[data-interface-theme="minimal"] [data-slot="card-header"] {
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
  }

  :root[data-interface-theme="minimal"] [data-slot="card-content"] {
    padding-bottom: 0.75rem;
  }

  :root[data-interface-theme="minimal"] .page-enter,
  :root[data-interface-theme="minimal"] [class*="space-y-8"],
  :root[data-interface-theme="minimal"] [class*="space-y-6"] {
    row-gap: 1rem;
  }

  :root[data-interface-theme="minimal"]
    [class*="space-y-8"]
    > :not([hidden])
    ~ :not([hidden]),
  :root[data-interface-theme="minimal"]
    [class*="space-y-6"]
    > :not([hidden])
    ~ :not([hidden]) {
    margin-top: 1rem;
  }

  :root[data-interface-theme="minimal"] [class*="gap-6"] {
    gap: 1rem;
  }

  :root[data-interface-theme="minimal"] .platform-header-surface {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
  }

  :root[data-interface-theme="minimal"] .platform-header-content {
    padding: 0;
  }

  :root[data-interface-theme="minimal"] .platform-header-gradient {
    display: none;
  }

  :root[data-interface-theme="minimal"] .bg-dashboard {
    background-color: hsl(var(--background));
  }

  :root[data-interface-theme="editorial"] .brand-background {
    opacity: 0.55;
  }

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

  :root[data-radius] .rounded-sm {
    border-radius: var(--radius-sm);
  }

  :root[data-radius] .rounded,
  :root[data-radius] .rounded-md {
    border-radius: var(--radius-md);
  }

  :root[data-radius] .rounded-lg {
    border-radius: var(--radius-lg);
  }

  :root[data-radius] .rounded-xl,
  :root[data-radius] .rounded-2xl,
  :root[data-radius] .rounded-3xl {
    border-radius: var(--radius-xl);
  }
}

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