@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Adding the preflight selector (pr-twp) to components was not changing the font as desired.
  So this piece of code adds tw-font-sans everywhere we include preflight. */
  .pr-twp {
    @apply tw-font-sans;
  }
}

/*
 * WARNING: These themes are also represented in paranext-core/src/shared/data/themes.data.json!
 * Please update in both locations
*/
/* #region shared with https://github.com/paranext/paranext-extension-template/blob/main/src/tailwind.css */

@layer base {
  @font-face {
    font-family: "Inter";
    font-display: "swap";
    src: url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
  }

  /**
   * Theme colors and other CSS variable properties in Platform.Bible. These are applied in CSS
   * properties using `hsl(var(--variableName))` or Tailwind classes like `tw-bg-primary`
   *
   * See the wiki's [Matching Application
   * Theme](https://github.com/paranext/paranext-extension-template/wiki/Extension-Anatomy#matching-application-theme)
   * section for more information
   */
  /* ["Slate" base theme by shadcn/ui](https://ui.shadcn.com/docs/theming#slate) */
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%; /* black */
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%; /* black */
    --popover: 210 20% 98%; /* popover platform */
    --popover-foreground: 222.2 84% 4.9%; /* black */
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 50% 95%;
    --secondary-foreground: 222.2 47.4% 11.2%; /* slate-900 */
    --muted: 210 50% 95%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 50% 95%;
    --accent-foreground: 222.2 47.4% 11.2%; /* slate-900 */
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%; /* slate-50 */
    --border: 214.3 31.8% 91.4%; /* slate-200 */
    --input: 214.3 31.8% 91.4%; /* slate-200 */
    --ring: 222.2 84% 4.9%; /* black */

    --sidebar-background: 210 20% 98%; /* popover platform */
    --sidebar-foreground: 222.2 84% 4.9%; /* black */
    --sidebar-primary: 222.2 47.4% 11.2%;
    --sidebar-primary-foreground: 210 40% 98%;
    --sidebar-accent: 210 50% 95%;
    --sidebar-accent-foreground: 222.2 47.4% 11.2%; /* slate-900 */
    --sidebar-border: 214.3 31.8% 91.4%; /* slate-200 */
    --sidebar-ring: 222.2 84% 4.9%; /* black */

    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%; /* black */
    --foreground: 210 40% 98%; /* slate-50 */
    --card: 222.2 84% 4.9%; /* black */
    --card-foreground: 210 40% 98%; /* slate-50 */
    --popover: 222.2 84% 4.9%; /* black */
    --popover-foreground: 210 40% 98%; /* slate-50 */
    --primary: 210 40% 98%; /* slate-50 */
    --primary-foreground: 222.2 47.4% 11.2%; /* slate-900 */
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%; /* slate-50 */
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%; /* slate-50 */
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%; /* slate-50 */
    --border: 215.3 19.3% 34.5%; /* slate-600 */
    --input: 215.3 19.3% 34.5%; /* slate-600 */
    --ring: 212.7 26.8% 83.9%;

    --sidebar-background: 222.2 84% 4.9%; /* black */
    --sidebar-foreground: 215 20.2% 65.1%;
    --sidebar-primary: 210 40% 98%; /* slate-50 */
    --sidebar-primary-foreground: 222.2 47.4% 11.2%; /* slate-900 */
    --sidebar-accent: 217.2 32.6% 17.5%;
    --sidebar-accent-foreground: 215 20.2% 65.1%;
    --sidebar-border: 217.2 32.6% 17.5%;
    --sidebar-ring: 212.7 26.8% 83.9%;
  }

  /* Palette built in https://tweakcn.com/themes/cmeukcpoj000204l45lxw5a74 based on "Caffeine" theme*/
  .paratext-light {
    --background: 0 0% 97.6471%;
    --foreground: 0 0% 12.549%;
    --muted: 0 0% 93.7255%;
    --muted-foreground: 0 0% 39.2157%;
    --popover: 0 0% 98.8235%;
    --popover-foreground: 0 0% 12.549%;
    --card: 0 0% 98.8235%;
    --card-foreground: 0 0% 12.549%;
    --border: 0 0% 84.7059%;
    --input: 0 0% 84.7059%;
    --primary: 171.4286 81.8182% 15.098%;
    --primary-foreground: 0 0% 100%;
    --secondary: 34.0541 100% 85.4902%;
    --secondary-foreground: 16.2712 50.4274% 22.9412%;
    --accent: 0 0% 90.9804%;
    --accent-foreground: 0 0% 12.549%;
    --destructive: 10.1639 77.8723% 53.9216%;
    --destructive-foreground: 0 0% 100%;
    --ring: 16.6667 21.9512% 32.1569%;

    /* WARN: in Shadcn files, `--sidebar-background` is `--sidebar`
     * I recommend changing this to make it match Shadcn.
     */
    --sidebar-background: 0 0% 98.4314%;
    --sidebar-foreground: 0 0% 14.5098%;
    --sidebar-primary: 0 0% 20.3922%;
    --sidebar-primary-foreground: 0 0% 98.4314%;
    --sidebar-accent: 0 0% 93.7255%;
    --sidebar-accent-foreground: 0 0% 20.3922%;
    --sidebar-border: 0 0% 92.1569%;
    --sidebar-ring: 0 0% 70.9804%;
  }

  .paratext-dark {
    --background: 0 0% 6.6667%;
    --foreground: 0 0% 93.3333%;
    --muted: 0 0% 13.3333%;
    --muted-foreground: 0 0% 70.5882%;
    --popover: 0 0% 9.8039%;
    --popover-foreground: 0 0% 93.3333%;
    --card: 0 0% 9.8039%;
    --card-foreground: 0 0% 93.3333%;
    --border: 45 14.2857% 10.9804%;
    --input: 0 0% 28.2353%;
    --primary: 40 85.7143% 97.2549%;
    --primary-foreground: 183.1579 54.2857% 6.8627%;
    --secondary: 28.2353 17.5258% 19.0196%;
    --secondary-foreground: 29.5082 100% 88.0392%;
    --accent: 0 0% 16.4706%;
    --accent-foreground: 0 0% 93.3333%;
    --destructive: 10.1639 77.8723% 53.9216%;
    --destructive-foreground: 0 0% 100%;
    --ring: 29.5082 100% 88.0392%;

    --sidebar-background: 240 5.8824% 10%;
    --sidebar-foreground: 240 4.7619% 95.8824%;
    --sidebar-primary: 224.2781 76.3265% 48.0392%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7037% 15.8824%;
    --sidebar-accent-foreground: 240 4.7619% 95.8824%;
    --sidebar-border: 240 3.7037% 15.8824%;
    --sidebar-ring: 240 4.878% 83.9216%;
  }
}
/* #endregion */

/* Note that the following region is from shadcn/ui's styles
 * https://ui.shadcn.com/docs/installation/manual#configure-styles but is scoped down to .pr-twp
 * because this is just a component library and should not apply its styles to the entire page.
 *
 * There is now a section in this library's README.md that explains how to apply these styles to the
 * entire page if desired.
 *
 * The template has the original shadcn/ui styles because it intentionally applies the styles to the
 * entire page. The same is true for Platform.Bible - see `app.component.scss`
 */
/* #region shared with https://github.com/paranext/paranext-extension-template/blob/main/src/tailwind.css but with the difference of being scoped to .pr-twp here */

@layer base {
  .pr-twp,
  .pr-twp * {
    @apply tw-border-border tw-outline-ring/50;
  }

  /**
    * disabled because tslint does not like it, but it is the selector that's needed
    */
  /* stylelint-disable-next-line selector-no-qualifying-type */
  body.pr-twp {
    @apply tw-bg-background tw-text-foreground;
  }
}
