/*
* global.css
*
* Global styles for the entire application
 */

/* Tailwind CSS */
@import 'tailwindcss';

/* local styles - update the below if you add a new style */
@import './theme.css';
@import './theme.utilities.css';
@import './shadcn-ui.css';
@import './markdoc.css';
@import './makerkit.css';

/* plugins - update the below if you add a new plugin */
@plugin "tailwindcss-animate";

/* content sources - update the below if you add a new path */
@source "../../../packages/*/src/**/*.{ts,tsx}";
@source "../../../packages/features/*/src/**/*.{ts,tsx}";
@source "../../../packages/billing/*/src/**/*.{ts,tsx}";
@source "../../../packages/plugins/*/src/**/*.{ts,tsx}";
@source "../../../packages/cms/*/src/**/*.{ts,tsx}";
@source "../{app,components,config,lib}/**/*.{ts,tsx}";

@theme {
  --font-cal: var(--font-cal);
  --font-sans: -apple-system, var(--font-sans);
  --font-heading: var(--font-heading);

  --animate-fade-up: fade-up 0.5s;
  --animate-fade-down: fade-down 0.5s;
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes fade-up {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    80% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
    }
  }
  @keyframes fade-down {
    0% {
      opacity: 0;
      transform: translateY(-10px);
    }
    80% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
    }
  }
  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
}

@theme {
  --font-cal: var(--font-cal);
  --font-sans: -apple-system, var(--font-sans);
  --font-heading: var(--font-heading);

  --animate-fade-up: fade-up 0.5s;
  --animate-fade-down: fade-down 0.5s;
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes fade-up {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    80% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
    }
  }
  @keyframes fade-down {
    0% {
      opacity: 0;
      transform: translateY(-10px);
    }
    80% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
    }
  }
  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
}

/*
  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);
  }
}

/*
  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);
  }
}

/*
  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);
  }
}

/* variants - update the below if you add a new variant */
@variant dark (&:where(.dark, .dark *));

@layer base {
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--border, currentColor);
  }

  input::placeholder,
  textarea::placeholder {
    color: theme(--color-muted-foreground);
  }
}